前端入坑紀(jì) 05
又是一個(gè)陽(yáng)光明媚的日子星虹，午后的慵懶革屠，趕不走的是分享前端經(jīng)驗(yàn)的激情。
閑言少敘匹舞，先上圖為敬褐鸥！
效果如圖
一等大事：項(xiàng)目鏈接
Ps:網(wǎng)頁(yè)背景為黑色，請(qǐng)點(diǎn)頁(yè)面里的“查看源碼”赐稽，觀看效果叫榕。
HTML 結(jié)構(gòu)
<div class="wrp">
<div>
我是個(gè)Box
</div>
</div>
CSS 結(jié)構(gòu)
// 包裹的盒子做了絕對(duì)垂直居中定位
.wrp {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 300px;
transform: translate(-150px, -100px);
text-align: center;
display: table;
z-index: 3;
}
// 主角盒子
.wrp>div {
position: relative;
background-color: lightskyblue;
//table-cell使得盒子里的內(nèi)容垂直居中
display: table-cell;
vertical-align: middle;
}
// 陰影的實(shí)現(xiàn)原理
.wrp>div::after {
content: "";
position: absolute;
z-index: -1;
width: 100%;
height: 25px;
left: 0;
bottom: -26px;
box-shadow: 0 -12px 12px rgba(0, 0, 0, .28);
border-radius: 50%;
}
首先給主角盒子建立了個(gè)偽元素，通過(guò)圓角屬性將它變成橢圓形姊舵。接著賦予它Y方向負(fù)投影后晰绎，最后通過(guò)z-index置于主角盒子的下一層
Ps:My skill's not better enough! 如有錯(cuò)漏，還請(qǐng)不吝賜教
