盒子模型内、外阴影

 

 
 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*内部阴影*/
            #mdiv { 
                width: 100px;
                height: 100px;
                border: 1px solid red;
                -moz-box-shadow: inset 2px 0 4px #000;
                -webkit-box-shadow: inset 2px 0 4px #000;
                box-shadow: inset 2px 0 4px #000;
            }
            /*外部阴影*/
            #ydiv { 
                width: 100px;
                height: 100px;
                border: 1px solid red;
                -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
                -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
                box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
            }
        </style>
    </head>
    <body>
        <div id="mdiv"></div>
        <div id="ydiv"></div>
    </body>
</html>

 

 

 

 

 

 

 

posted on 2019-12-06 15:08  效率的九尾  阅读(260)  评论(0)    收藏  举报