CSS3的新特性之一就是光照效果。光照是一種將元素表現為在光影背景下的效果的CSS功能。這種功能可以給你的網站增加更多的視覺效果和美感。
/* 普通元素模擬燈光照射 */ .box { width: 200px; height: 200px; background-color: #ddd; box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); } /* 線性漸變模擬光源 */ .box-2 { width: 200px; height: 200px; background-color: #ddd; background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.5) 100%); } /* 徑向漸變模擬聚光燈 */ .box-3 { width: 200px; height: 200px; background-color: #fff; background: radial-gradient(circle closest-side, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 90%); }
以上是CSS3一些光照效果的實現方式。通過添加不同的色調和漸變方式,可以產生不同的效果。可以看到,光照效果能夠為網站增加更多的設計元素和視覺效果。
上一篇css3 元素排序
下一篇css3 冒號選擇器