CSS可以給頁(yè)面添加很多裝飾效果,比如發(fā)光和陰影效果。發(fā)光效果可以使頁(yè)面元素更加醒目,而陰影效果可以增加元素的深度和空間感。
.box { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
以上代碼可以給名為“box”的元素添加10像素的陰影和發(fā)光效果。box-shadow屬性接受四個(gè)參數(shù),依次代表水平偏移量、垂直偏移量、模糊半徑和陰影的顏色。顏色值可以使用RGBA來(lái)定義,其中A代表透明度。text-shadow屬性用法類似,只不過(guò)是給文本添加陰影效果。
如果想要添加彩色的發(fā)光效果,可以使用CSS的linear-gradient()函數(shù)來(lái)實(shí)現(xiàn):
.box { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 50px #FF00FF, 0 0 100px #00FFFF; }
以上代碼可以給名為“box”的元素添加兩層發(fā)光效果,一層為紫色,半徑為50像素,一層為青色,半徑為100像素。多層陰影或者發(fā)光效果可以通過(guò)在屬性值里使用逗號(hào)分隔來(lái)實(shí)現(xiàn)。
總之,CSS的發(fā)光和陰影效果可以使頁(yè)面更加生動(dòng)有趣,為頁(yè)面設(shè)計(jì)帶來(lái)更多可能性。