轮廓和阴影 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>轮廓和阴影</title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                background-color: #87CEEB;
                margin: 50px auto;
                /* 
                    轮廓
                        轮廓就是不占空间的边框，设置轮廓不会影响元素的布局
                 */
                outline: 5px red solid;
                
                /* 
                    阴影
                        box-shadow用来设置元素的阴影，和轮廓一样，阴影也不会影响页面的布局
                        box-shadow值
                            inset内部阴影
                                第一个值，阴影的水平偏移量
                                    正值向右移动，负值向左移动
                                第二个值，阴影的垂直偏移量
                                    正值向下移动，负值向上移动
                                第三个值，阴影的模糊半径
                                第四个值，阴影的颜色
                            
                 */
                /* box-shadow: inset 10px 10px 30px #000000; */
                /* box-shadow:inset -10px 20px 5px #000000; */
                
                box-shadow: 20px 20px 20px rgba(0,0,0,.5); 
            }
            
            
            
        </style>
    </head>
    <body>
        <div class="box"></div>
        
    </body>
</html>

 

posted @ 2022-05-11 22:01  氯丙嗪  阅读(9)  评论(0)    收藏  举报