CSS3 Box Shadow漸變是CSS3技術中的一項新特性,它的主要作用是為網頁元素創(chuàng)建陰影效果。采用此技術可以賦予網頁的元素更加立體的感覺,為網頁設計師提供更豐富的表現(xiàn)手段,讓網頁看起來更加美觀、時尚。
.box-shadow { box-shadow: 0 0 5px #888, 0 0 10px #333, 0 0 20px #111; }
如上所示我們在box-shadow屬性中添加了三個參數(shù),分別是橫向偏移、縱向偏移、模糊數(shù)值、陰影擴展數(shù)值和顏色,使用“,”來分隔不同的陰影效果。通常情況下,一個方框只能添加一個陰影效果,如果要添加多個陰影效果,則需要在值中使用逗號進行分隔。
CSS3 Box Shadow漸變技術也可以實現(xiàn)多個顏色的漸變效果,如下:
.box-shadow { box-shadow: 0 0 5px #333, 0 0 20px rgba(0,0,0,.5), 0 0 30px rgba(0,0,0,.3), 0 0 40px rgba(0,0,0,.2), 0 0 50px rgba(0,0,0,.1); }
如上所述,我們在box-shadow屬性中添加RGBA值來實現(xiàn)顏色漸變的效果。漸變效果的強度可以通過改變透明度來調節(jié),也可以使用其他顏色和RGB值的組合來實現(xiàn)更加豐富的漸變效果。
上一篇css3d立方