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>

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章