往往我們?cè)谧鲆恍┨厥獾年幱靶Ч臅r(shí)候腰根，使用圖片做背景的方式實(shí)際上是很差勁的劫灶，在不考慮適配老版本瀏覽器的前提下南缓，我們可以使用css3的自定義出自己想要的陰影風(fēng)格目锭。
下面將以曲線陰影和翹邊陰影為例和泌，講解自定義陰影的過(guò)程村缸。
先來(lái)看下效果圖
曲線陰影
曲線陰影其實(shí)可以使用雙層陰影重疊的方式實(shí)現(xiàn)
我們將取消陰影的圖片做下分解應(yīng)該會(huì)更容易理解，示意圖如下：
如上圖武氓，圖1基礎(chǔ)的陰影下梯皿，在加一個(gè)有弧度的陰影即可。
1县恕、圖1基礎(chǔ)陰影很容易實(shí)現(xiàn)东羹，內(nèi)陰影+外陰影
.box-shadow1{
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
2、然后使用偽類在元素的后面添加一個(gè)“可適配”的陰影忠烛，為了可適配属提，我們就要使用相對(duì)定位，實(shí)現(xiàn)代碼如下
.box-shadow1{
position:relative;
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.box-shadow1:after{
content:"";
position:absolute;
background:transparent;
top:50%; //設(shè)置寬高僅僅設(shè)置上下左右邊距是為了讓系統(tǒng)自動(dòng)定位美尸。
bottom: 1px;
left: 10px;
right: 10px;
z-index: -1; //將副陰影置于主陰影下
box-shadow: 0 0 20px rgba(0,0,0,0.7);
border-radius: 100px/10px;
}
如此即實(shí)現(xiàn)了曲線陰影的效果冤议。
<div class="box box-shadow1">將box-shadow1作為類使用即可</div>
翹邊陰影
同理旬迹，翹邊陰影可以在基礎(chǔ)陰影下疊加兩個(gè)平行四邊形即可。
這里就直接上分解圖和源碼了求类，不再做講解
.box-shadow2{
position:relative;
box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
}
.box-shadow2:before,.box-shadow2:after{
content: "";
position:absolute;
top:20px;bottom: 22px;
background: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.7);
z-index: -1;
background: #fff;
}
.box-shadow2:before{
left: 22px;
right:12px;
transform: skew(-12deg) rotate(-4deg);
}
.box-shadow2:after{
left: 12px;
right:22px;
transform: skew(12deg) rotate(4deg);
}
