首页 > > 网页制作 > css >

css：css3（圆角边框、盒子阴影、文字阴影）

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

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>