• css3学习01


    1.圆角边框(div的一个属性:border-radius)

      

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
      text-align:center;
      border:2px solid #a1a1a1;
      padding:10px 40px; 
      background:#dddddd;
      350px;
      border-radius:25px;
    }
    </style>
    </head>
    <body>
    
    <div>有圆角的div</div>
    
    </body>
    </html>
    

      效果图:

    2.边框阴影(box-shadow)

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
        300px;
        height:100px;
        background-color:blue;
        box-shadow: 15px 15px 30px red;
    }
    </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>
    

      效果图:

      

     

    box-shadow:

        水平阴影、垂直阴影、模糊距离,以及阴影的颜色

        第一个参数--水平阴影,向右移动距离
        第二个参数--垂直阴影,向下移动距离
        第三个参数--模糊距离,把阴影拉远、变模糊
        第四个参数--阴影颜色


  • 相关阅读:
    Redis
    Redis
    运维
    Redis
    Redis
    Redis
    Redis
    Redis
    Redis
    Spring
  • 原文地址:https://www.cnblogs.com/kylyww/p/6230369.html
Copyright © 2020-2023  润新知