几个常用的CSS3样式代码以及不兼容的解决办法

border-radius实现圆角效果

view source print ?

1.1 CSS3代码：

2.2

3.3 -webkit-border-radius:10px;

4.4 -moz-border-radius:10px;

5.5 border-radius:10px;

6.6 margin: 0px; padding: 0px; border: 0px; outline: 0px; float: none; vertical-align: baseline; position: static; left: auto; top: auto; right: auto; bottom: auto; height: auto; width: auto; font-family: 'Courier New', 宋体; background: none;">666;

7.7 width:200px;height:100px;

Firefox，Chrome Google，Safari等浏览器的显示效果如图0-0：

图0-0

但是IE这个异类不支持CSS3的这个属性，在IE9下的显示效果如图0-1：

图0-1

但是不能放任它不管，还是找办法解决这个兼容性问题。

解决方案：在CSS文件中通过behavior属性——这个属性只能被IE识别，引入一个htc文件, ie-css3.htc

这个是由Remiz Rahnas使用 VML 编写了一个 HTC 文件，为 IE 浏览器提供圆角效果的支持。

view source print ?

01.1 div{

02.2     -webkit-border-radius:10p;

03.3     -moz-border-radius:10px;

04.4     border-radius:10px;

05.5      margin: 0px; padding: 0px; border: 0px; outline: 0px; float: none; vertical-align: baseline; position: static; left: auto; top: auto; right: auto; bottom: auto; height: auto; width: auto; font-family: 'Courier New', 宋体; background: none;">666;

06.6     width:200px;

07.7     height:100px;

08.8     color:#fff;

09.9     behavior: url(ie-css3.htc);

10.10 }

截两幅图看看效果，一幅来自IE6，一幅来自IE9：



注意:首先，在 Server 端需要引入一个 HTC 文件，经过 gzip 压缩后对 server 端和 client 端性能应该不会有太大的影响；其次，它会使你的 CSS 验证不合法；另外，这个脚本在 IE8 上有一些问题，它会使 z-index 值变成负数。因此使用时还需要小心.

box-shadow实现阴影效果

view source print ?

01.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02.2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

03.3 <head>

04.4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

05.5     <title></title>

06.6     <style type="text/css">

07.7         div img{

08.8

09.9             -webkit-box-shadow:5px 5px 5px #000;

10.10             -moz-box-shadow:5px 5px 5px #000;

11.11             box-shadow:5px 5px 5px #000;

12.12             width:295px;

13.13             height:300px;

14.14             /* For IE 8 */

15.15             -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000')";

16.16             /* For IE 5.5 - 7 */

17.17             filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');

18.18         }

19.19     </style>

20.20 </head>

21.21 <body>

22.22     <div>

23.23         <img src="beautiful.jpg">

24.24     </div>

25.25 </body>

26.26 </html>

Chrome,Firefox,IE9下的效果显示:

接下来要做的事情，想必读者朋友都知道了，兼容IE6-8。首先想到的IE的滤镜。来看看效果吧。

view source print ?

01.1 加上滤镜之后的代码片段:

02.2

03.3 div img{

04.4

05.5             -webkit-box-shadow:5px 5px 5px #000;

06.6             -moz-box-shadow:5px 5px 5px #000;

07.7             box-shadow:5px 5px 5px #000;

08.8             width:295px;

09.9             height:300px;

10.10             /* For IE 8 */

11.11             -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000')";

12.12             /* For IE 5.5 - 7 */

13.13             filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');

14.14         }

测试之后的效果，分别是IE5.5-IE8：

虽然差强人意，但凑合着用。如果有朋友知道除此之外的方法，能否告知一声，共同进步嘛！^_^

opacity实现透明度效果

view source print ?

01.1 div img{

02.2     width:295px;

03.3     height:300px;

04.4     -webkit-opacity:0.3;

05.5     -moz-opacity:0.3;

06.6     opacity: 0.3;

07.7     /*for IE 6,7,8*/

08.8     filter:alpha(opacity=30);

09.9     border:1px solid #ccc;

10.10 }

兼容IE 6,7,8。效果（来自IE6）：

transform:rotate(度数) 将元素旋转X度

view source print ?

01.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

02.2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

03.3 <head>

04.4     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

05.5     <title></title>

06.6     <style type="text/css">

07.7         div {

08.8

09.9             width:150px;

10.10             height:50px;

11.11             margin: 50px;

12.12             -webkit-transform:rotate(7deg);

13.13             -moz-transform:rotate(7deg);

14.14             -ms-transform:rotate(7deg);

15.15             -o-transform:rotate(7deg);

16.16             transform:rotate(7deg);

17.17               border:1px solid #ccc;

18.18         }

19.19     </style>

20.20 </head>

21.21 <body>

22.22     <div>

23.23

24.24     </div>

25.25 </body>

26.26 </html>

让我们来去W3C看看transform的兼容性:

浏览器及其版本的支持，但是IE6,7,8呢？俗话说，兵来将挡，水来土掩，山人自有妙计，只不过这妙计是借来的。