css:css3(圆角边框、盒子阴影、文字阴影)

2020-06-05 16:01:02来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

css:css3(圆角边框、盒子阴影、文字阴影)

1、圆角边框

定义圆角边框后,可以将盒子定义为圆角的

(1)长度方式

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
          div{
              width: 200px;
              height: 100px;
              background-color: yellowgreen;
              border-radius:3px;
          }
        </style>
    </head>
    <body>
    
   <div></div>
     
    </body>
</html>

 

设置成高度的一半:

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          div{
              width: 200px;
              height: 100px;
              background-color: yellowgreen;
              border-radius:50px;
          }
        </style>
    </head>
    <body>
       <div>
           
       </div>    
    </body>
</html>

 

 

(2)百分比方式

圆形:长度为正方形的一半:

<html>

    <head>
        <meta charset="utf-8">
        <title>盒子模型外边距</title>
        <style>
          div{
              width: 200px;
              height: 200px;
              background-color: yellowgreen;
              border-radius:50%;
          }
        </style>
    </head>
    <body>
       <div>
           
       </div>    
    </body>
</html>

 

 百分比方式定义盒子:

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          div{
              width: 200px;
              height: 100px;
              background-color: yellowgreen;
              border-radius:5%;
          }
        </style>
    </head>
    <body>
       <div>
           
       </div>    
    </body>
</html>

 

 
(3)不同的角设置不同的圆角

以左上角为起点,顺时针的方式

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          div{
              width: 200px;
              height: 200px;
              background-color: yellowgreen;
              border-radius:10px 20px 30px 40px;
          }
        </style>
    </head>
    <body>
       <div>
           
       </div>    
    </body>
</html>

 

 (4)选择角去设置:

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          div{
              width: 200px;
              height: 200px;
              background-color: yellowgreen;
              border-bottom-right-radius: 16px;
          }
        </style>
    </head>
    <body>
       <div>
           
       </div>    
    </body>
</html>

 

 

2、盒子阴影

 

 (1)前两个为必选项,后四个可写可不写

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          div{
              width: 200px;
              height: 200px;
              background-color: yellowgreen;
              border-radius: 16px;
              box-shadow:10px 10px 10px 10px rgba(0,0,0,0.3);
          }
        </style>
    </head>
    <body>
       <div>
           
       </div>    
    </body>
</html>

 

(2) 只写前两个属性:

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          div{
              width: 200px;
              height: 200px;
              background-color: yellowgreen;
              border-radius: 16px;
              box-shadow:10px 10px;
          }
        </style>
    </head>
    <body>
       <div>
           
       </div>    
    </body>
</html>

 

 

3、文字阴影

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
          div{
              width: 200px;
              height: 200px;
              text-shadow: 5px 5px 6px rgba(0,0,0,0.3);
          }
        </style>
    </head>
    <body>
       <div>
              人之初,性本善
       </div>    
    </body>
</html>

 


原文链接:https://www.cnblogs.com/zhai1997/p/13048360.html
如有疑问请与原作者联系

标签:ClassIEPOSTHTML3kset

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:如果是自学WEB前端的话,该如何才能找到一份7K实习生工作呢?

下一篇:字节、腾讯、滴滴前端面试经验分享,裸辞过后,我终于又活过来了