CSS3是一項功能強大的技術,為開發人員提供了各種有趣的功能和效果。其中,光照效果是一個可以很好地提升網頁視覺效果的功能。
.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對一個盒子添加光照效果。這個盒子使用了陰影、圓角等屬性,使其更加具有立體感。而在盒子上方,使用了偽元素::before來創建一個白色的圓形,然后使用徑向漸變,將圓形變成透明。這樣就形成了光照向下的效果。當然,我們也可以調整徑向漸變的半徑、顏色等參數,來達到不同的效果。
上一篇css div固定底部
下一篇css - 的符號