CSS3是一項(xiàng)功能強(qiáng)大的技術(shù),為開發(fā)人員提供了各種有趣的功能和效果。其中,光照效果是一個(gè)可以很好地提升網(wǎng)頁視覺效果的功能。
.box {
background-color: #fff;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
border-radius: 5px;
position: relative;
}
.box::before {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 10px;
height: 10px;
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
border-radius: 50%;
}
上述代碼展示了如何使用CSS3對一個(gè)盒子添加光照效果。這個(gè)盒子使用了陰影、圓角等屬性,使其更加具有立體感。而在盒子上方,使用了偽元素::before來創(chuàng)建一個(gè)白色的圓形,然后使用徑向漸變,將圓形變成透明。這樣就形成了光照向下的效果。當(dāng)然,我們也可以調(diào)整徑向漸變的半徑、顏色等參數(shù),來達(dá)到不同的效果。
上一篇css div固定底部
下一篇css - 的符號