最近很懶得再用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);
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瀏覽器的效果也沒問題。
呀~XD,IE真的很討人厭!!來去試用看看~
回覆刪除