2011年4月14日

跨瀏覽器的CSS3圓角(rounded corner)、陰影(shadow)

最近很懶得再用Photoshop繪製網頁需要的圓角和陰影效果,因為每次改版就要改圖還真麻煩,所以嘗試著採用CSS3加快網站版面雛型的製作。

CSS3已經定義了 border-radius (圓角)及 box-shadow (陰影)兩種屬性。
  border-radius: 15px;
  box-shadow: 10px 10px 20px #000;

Firefox、Safari、Chrome也有自己的特殊語法,但新版軟體已經支元CSS3提供的上述語法。
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-box-shadow: 10px 10px 20px #000;
  -webkit-box-shadow: 10px 10px 20px #000;

IE的部分還是一樣麻煩,即使到了IE8仍不支援CSS3,雖然我可以當作沒看到,因為I DON'T CARE,可是統計數字還是顯示高達60%的瀏覽者是用IE。更糟糕的是即使IE9已經改進了,但WinXP不能升級,而且相信還是會有很多人不會幫Win7升級到IE9。

IE其實有針對陰影效果提供filter,但把這一長串寫在CSS定義裡面,實在看了很礙眼。更好一點的辦法是用IE-CSS3,它用VML補強IE對border-radius、box-shadow的支援。

IE使用filter實現陰影效果。
filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);

使用IE-CSS3實現圓角和陰影。
  border-radius: 15px;
  box-shadow: 10px 10px 20px #000;
  behavior: url(ie-css3.htc);

在Google Chrome瀏覽器,直接用CSS3的語法,測試沒問題。


Firefox4瀏覽器的效果也沒問題。

該死的IE搭配IE-CSS3,載入頁面時會先顯示方角,頁面載入後才會處理成圓角,還算可以接受,但按鈕的部分套用behavior仍有BUG。

1 則留言:

lyhcode by lyhcode
歡迎轉載,請務必註明出處!