CSS3——box-shadow

box-shadow  （外陰影）

邊框加陰影，有內陰影和外陰影

關於Z軸，先設置的屬性在上面，后設置的屬性在下面

外陰影跟內陰影的五個值都是差不多一樣的，只有第4個值外陰影是放大內陰影是縮小

我們來看一下設置的效果是什么樣的。。。👇

box-shadow：inset （內陰影）

這里面的第五個值是顏色，第四個值才是縮小。

圖片里面備注錯了

 

我們來看一下設置的效果是什么樣的。。。👇

內外陰影結合使用

接下來我們來用我們今天所學到的知識做兩個小demo，感受一下炫酷效果！！！

制作一個這樣的圓

        :root{
            background:black;
        }
        div{
            width:300px;
            height:300px;
            border-radius: 50%;
            position:absolute;
            left:calc(50% - 150px);
            top: calc(50% - 150px);
            
            box-shadow: inset 0px 0px 10px #fff,
                        inset 10px 0px 80px #f0f,
                        inset -10px 0px 80px #0ff,
                        inset 10px 0px 300px #f0f,
                        inset -10px 0px 300px #0ff,
                        0px 0px 50px #fff,
                        -10px 0px 50px #f0f,
                        10px 0px 80px #0ff;
        }   

 再寫一個小太陽

        :root{
            background:black;
        }
        div{
            width:300px;
            height:300px;
            border-radius: 50%;
            position:absolute;
            left:calc(50% - 150px);
            top: calc(50% - 150px);
            background: #fff;
            
            box-shadow: 0px 0px 100px 50px #fff,
                        0px 0px 250px 125px #ff0;
        }    

再寫一個移入移出的效果，平時網上常見的

        :root{
            background:#fff;
        }
        div{
            width:200px;
            height:300px;
            border-radius: 5px;
            position:absolute;
            left:calc(50% - 100px);
            top: calc(50% - 150px);
            background: #fff;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, .1);
            transition: all .6s;
        }
        div::after{
            content: "";
            position: absolute;
            left:0;
            top: 0;
            width:100%;
            height:100%;
            border-radius: 5px;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, .3);
            opacity: 0;
            transition: all .6;
        }
        div:hover{
            transition: scale(1.25, 1.25);
        }
        div:hover::after{
            opacity: 1;
        }