大家都知道box-shadow是h5新增屬性月劈，用來實(shí)現(xiàn)盒子邊緣有陰影的效果，但經(jīng)常會(huì)看見許多場(chǎng)景里陰影的樣式各種各樣涂乌，并不是簡(jiǎn)單的四周有陰影的效果艺栈，它們是怎么實(shí)現(xiàn)的呢，今天就跟大家分享兩種陰影實(shí)現(xiàn)的方法湾盒。
一湿右、曲邊陰影
效果圖如下：它不僅是四周有陰影，下部還有一層曲邊的陰影罚勾，它的原理其實(shí)很簡(jiǎn)單毅人，首先盒子自身有陰影吭狡，然后在使用另一個(gè)有陰影的盒子重疊形成效果圖里的曲邊陰影。
首先說一下box-shadow的使用語法丈莺，它支持多個(gè)陰影的書寫划煮，中間用逗號(hào)隔開，如下
創(chuàng)建一個(gè)盒子缔俄，使用box-shadow給盒子一個(gè)x軸和y軸方向都是零暈染半徑為10px的外陰影和內(nèi)陰影弛秋。
style{
.box1{
width: 400px;
height: 200px;
background: white;
border: 1px solid lightgrey;
margin: 100px auto;
text-align: center;
line-height: 200px;
box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.3) inset;
}
}
body{
<div class="box1">
<span>曲邊陰影</span>
</div>
}
使用after偽類選擇器在box1子集的后面增加一個(gè)虛擬的標(biāo)簽，由于是一個(gè)虛擬標(biāo)簽俐载，瀏覽器不能識(shí)別蟹略，需要定義display屬性，給這個(gè)標(biāo)簽也加上陰影遏佣，由于是曲面的挖炬，所以需要設(shè)置border-radius使它有個(gè)弧度。然后使用定位將虛擬標(biāo)簽與原盒子重疊状婶，并使用z-index改變層級(jí)意敛，使它在div的下方。代碼如下
.box1::after{
display: block; //必須寫
content: ""; //必須寫
z-index: -1;
width: 390px;
height: 150px;
background: red;
position: absolute;
bottom: 0;
left: 4px;
border-radius: 30px/10px;
box-shadow: 0 8px 10px rgba(0,0,0,0.3);
}
當(dāng)沒有定位時(shí)膛虫，兩個(gè)盒子的排列方式如下：
定位后就實(shí)現(xiàn)了曲邊陰影：結(jié)果圖如下：
二草姻、翹邊陰影
原理與曲邊陰影一樣，使用偽類選擇器::afteryu 走敌， ::before增加兩個(gè)虛擬?標(biāo)簽碴倾，使用陰影的重疊實(shí)現(xiàn)翹邊陰影逗噩。
代碼如下：
.box2::after,.box2::before{
display: block;
content: "";
z-index: -1;
width: 170px;
height: 240px;
background: red;
position: absolute;
bottom: 20px;
left: 38px;
box-shadow: 30px 10px 40px rgba(0,0,0,0.5);
transform: skewX(-15deg);
}
.box2::before{
box-shadow: -20px 10px 40px rgba(0,0,0,0.5);
transform: skewX(15deg);
}
為了方便我們看掉丽，給了紅色背景，沒改變層級(jí)時(shí)結(jié)果如下：
調(diào)整兩個(gè)盒子的層級(jí)异雁，效果如下：
