|
CSS陰影詳解：
設(shè)計(jì)師常常使用一些獨(dú)特的字體效果和頁面效果，陰影是其中一個(gè)，它可以讓頁面中的文字和元素具有立體的效果，從而被突出出來。比如對(duì)于文字陰影，傳統(tǒng)的方法可能需要將文字切出來，直接使用圖片，如果考慮SEO和網(wǎng)站性能，還可能會(huì)使用CSS Sprites等技術(shù)將圖片整合：
h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...}
h2#title1{background-position:0 -30px;}
h2#title2{background-position:0 -60px;}
....
這是很棘手的事情，拼合圖片會(huì)花掉你的大量時(shí)間，而且為了實(shí)現(xiàn)更好視覺效果，你可能還要使用高質(zhì)量的32位png圖片，這又要讓你面對(duì)該死的IE 6的png透明問題！
事實(shí)上，對(duì)于文字的陰影效果，我們完全可以用CSS來實(shí)現(xiàn)！
可以查看 查看demo 先。
Text-shadow
text-shadow可以讓我們實(shí)現(xiàn)完美的文字陰影效果。基本寫法：
text-shadow:[顏色 x軸 y軸 模糊半徑],[顏色 x軸 y軸 模糊半徑]...
或者
text-shadow:[x軸 y軸 模糊半徑 顏色],[x軸 y軸 模糊半徑 顏色]...
這里的顏色就是陰影的顏色，你可以將顏色寫在前面，也可以寫在最后。x軸和y軸分別是其陰影的偏移位置，模糊半徑可以理解為陰影長度。而且現(xiàn)在大部分瀏覽器都支持多層陰影，你可以用逗號(hào)分開多組設(shè)置(當(dāng)然也可以只是用單個(gè)設(shè)置)。
示例：
h1{color:#000; background:#333; font:bold 24px/2 "微軟雅黑",Arial;
text-indent:2em;
text-shadow:black 2px 2px 2px; }
效果如下圖：
該屬性目前被除IE之外的大部分瀏覽器支持，對(duì)于IE，我們可以使用shadow濾鏡來實(shí)現(xiàn)：
filter: Shadow(Color='black', Direction='135', Strength='2')
你可能已經(jīng)注意到，使用shadow濾鏡只能定義角度 direction，而不能定義xy軸，z軸也被換成了strength。注意，使用該濾鏡的時(shí)候，不能夠設(shè)置背景顏色，否則濾鏡將無效！另外如果你的數(shù)學(xué)不是很好，不太懂三角函數(shù)的算法，你可以使用IE的另外一個(gè)濾鏡：dropshadow：
filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');
好吧，IE總是會(huì)拖我們的后腿，不過值得一提的是，IE的這兩個(gè)濾鏡是支持多層陰影的！比如，可以這樣寫：
filter: dropshadow(OffX=2, OffY=2, Color='red', Positive='true')
dropshadow(OffX=2, OffY=2, Color='yelow', Positive='true')
dropshadow(OffX=2, OffY=2, Color='blue', Positive='true');
欲了解更多關(guān)于IE的這兩個(gè)濾鏡，請(qǐng)查看：Shadow 和 Dropshadow
讓我們看一個(gè)多層陰影的例子(這里無視了IE)：
h1{font:bold 32px/2 Verdana, Geneva, sans-serif; color:#f39;
text-shadow:1px 1px 2px rgba(0,0,0,.8), 0 0 1em rgba(255, 0, 255, 0.5), 0 0 0.2em rgba(0, 0, 255, 0.9);}
效果如圖：
這里我們使用到了rgba色彩，它是一種在CSS中同時(shí)聲明顏色及其透明度的一種方法，且被大多數(shù)A級(jí)瀏覽器支持的色彩屬性（除了IE），了解更多請(qǐng)查看：《RGBa色彩的瀏覽器支持》——同時(shí)我們推薦對(duì)于純色半透明的情況使用這種簡單的寫法。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 CSS陰影詳解 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 CSS陰影詳解 [1]
第 2 頁 
