DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS3中很有用的特性:CSS陰影
CSS3中很有用的特性:CSS陰影
編輯:CSS進階教程     

網頁制作Poluoluo文章簡介:CSS陰影詳解.

設計師常常使用一些獨特的字體效果和頁面效果,陰影是其中一個,它可以讓頁面中的文字和元素具有立體的效果,從而被突出出來。傳統的方法我們可能常常需要將文字切出來,直接使用圖片,如果考慮SEO和網站性能,還可能會使用CSS Sprites等技術將圖片整合,比如:

1
2
3
4
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;}
....

這是很棘手的事情,拼合圖片會花掉你的大量時間,而且為了實現更好視覺效果,你可能還要使用高質量的32位png圖片,這又要讓你面對該死的IE 6的png透明問題!

事實上,對於文字的陰影效果,我們完全可以用CSS來實現!

可以查看查看demo先。

Text-shadow

text-shadow可以讓我們實現完美的文字陰影效果。基本寫法:

text-shadow:[顏色 x軸 y軸 模糊半徑],[顏色 x軸 y軸 模糊半徑]...

或者

text-shadow:[x軸 y軸 模糊半徑 顏色],[x軸 y軸 模糊半徑 顏色]...

這裡的顏色就是陰影的顏色,你可以將顏色寫在前面,也可以寫在最後。x軸和y軸分別是其陰影的偏移位置,模糊半徑可以理解為陰影長度。而且現在大部分浏覽器都支持多層陰影,你可以用逗號分開多組設置(當然也可以只是用單個設置)。

示例:

h1{color:#000; background:#333; font:bold 24px/2 "微軟雅黑",Arial; 
text-indent:2em;
text-shadow:black 2px 2px 2px; }

效果如下圖:

該屬性目前被除IE之外的大部分浏覽器支持,對於IE,我們可以使用shadow濾鏡來實現:

filter: Shadow(Color='black', Direction='135', Strength='2')

你可能已經注意到,使用shadow濾鏡只能定義角度 direction,而不能定義xy軸,z軸也被換成了strength。注意,使用該濾鏡的時候,不能夠設置背景顏色,否則濾鏡將無效!另外如果你的數學不是很好,不太懂三角函數的算法,你可以使用IE的另外一個濾鏡:dropshadow:

filter: dropshadow(OffX=2, OffY=2, Color='black', Positive='true');

好吧,IE總是會拖我們的後腿的,不過值得一提的是,IE的這兩個濾鏡是支持多層陰影的!比如,可以這樣寫:欲了解更多關於IE的這兩個濾鏡,請查看:Shadow 和 Dropshadow

讓我們看一個多層陰影的例子:

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中同時聲明顏色及其透明度的一種方法,且被大多數A級浏覽器支持的色彩屬性(除了IE),了解更多請訪問:《RGBa色彩的浏覽器支持》——同時我們推薦對於純色半透明的情況使用這種簡單的寫法。

text-shadow的浏覽器兼容性

目前text-shadow被Firefox 3.5+,Safari 1.1+/chrome 2.0+和opera 9.5支持,IE不支持。需要注意的是,Safari只有4.0才支持多層陰影。

  • IE各個版本都不支持text-shadow;
  • Opera 9.5+支持最多6-9層陰影,並使用CSS2渲染順序(最先定義的陰影在最下面)。而且出於性能的原因,模糊半徑被限制到100px;
  • Gecko (Firefox)理論上支持無限層text-shadows (不過不建議嘗試) 並遵循新的CSS3渲染順序(最先定義的陰影在最上面);
  • Safari 1.1-3.2只支持單層text-shadow (只顯示第一個逗號之前的聲明而無視後面的)。Safari 4.0+才支持多層陰影以及新的CSS3渲染順序;

box-shadow

先來說IE,IE不支持box-shadow屬性,但是上面提到的兩個濾鏡都可以用來實現陰影效果。這也就是說,IE並沒有把文字陰影和盒子陰影區分!這就會出現一些問題:元素中的文字會繼承元素的陰影設置。但是如果你不定義該元素的background和color,就只會出現文字陰影,如果只定義background屬性而不定義border,就只會出現盒子陰影,文字不會出現陰影;而如果只定義了border屬性而不定義background,就即會出現盒子陰影,內容文字及圖片也會出現陰影。有興趣的同學可以折騰一下。

好了,現在讓我們忘了IE,來看一看box-shadow。事實上,了解了text-shadow之後,box-shadow就很好理解了,目前只有firefox和safari/chrome通過私有屬性支持box-shadow屬性。而Opera浏覽器雖然目前還不支持該屬性,但是在其文檔中提到下一個版本的引擎Presto 2.3(目前最新版的Opera 10.10的引擎是Presto 2.2.15)中將會支持 box-shadow,那就讓我們慢慢等待吧。

box-shadow的語法和text-shadow是一樣的。

#boxShadow{
...
-webkit-box-shadow:2px 2px 2px black;
-moz-box-shadow:2px 2px 2px black;
...
}

事實上,box-shadow和border-radius是很好的搭檔:

#boxShadow1{-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid ddd;
-webkit-box-shadow:0 0 10px black;
-moz-box-shadow:0 0 10px black;
padding:10px;}

效果如圖:

firefox在3.5版本中才開始支持box-shadow,目前對陰影的渲染還不是很完美。

總結

CSS陰影是CSS3中很有用的特性,我們已經可以在Firefox/webkit/Opera中使用text-shadow,很快也可以在這些浏覽器中實現box-shadow。唯獨IE特立獨行,還在堅持它那蹩腳的濾鏡,這真是個杯具。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved