首页 > 代码库 > 几个常用的CSS3样式代码以及不兼容的解决办法
几个常用的CSS3样式代码以及不兼容的解决办法
border-radius实现圆角效果
1 CSS3代码:2 3 -webkit-border-radius:10px;4 -moz-border-radius:10px;5 border-radius:10px;6 background-color:#666;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 浏览器提供圆角效果的支持。
1 div{ 2 -webkit-border-radius:10p; 3 -moz-border-radius:10px; 4 border-radius:10px; 5 background-color:#666; 6 width:200px; 7 height:100px; 8 color:#fff; 9 behavior: url(ie-css3.htc);10 }
截两幅图看看效果,一幅来自IE6,一幅来自IE9:
注意:首先,在 Server 端需要引入一个 HTC 文件,经过 gzip 压缩后对 server 端和 client 端性能应该不会有太大的影响;其次,它会使你的 CSS 验证不合法;另外,这个脚本在 IE8 上有一些问题,它会使 z-index 值变成负数。因此使用时还需要小心.
box-shadow实现阴影效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title></title> 6 <style type="text/css"> 7 div img{ 8 background-color: #fff; 9 -webkit-box-shadow:5px 5px 5px #000;10 -moz-box-shadow:5px 5px 5px #000;11 box-shadow:5px 5px 5px #000;12 width:295px;13 height:300px;14 /* For IE 8 */15 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=‘#000000‘)";16 /* For IE 5.5 - 7 */17 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=‘#000000‘);18 }19 </style>20 </head>21 <body>22 <div>23 <img src="beautiful.jpg">24 </div>25 </body>26 </html>
Chrome,Firefox,IE9下的效果显示:
接下来要做的事情,想必读者朋友都知道了,兼容IE6-8。首先想到的IE的滤镜。来看看效果吧。
1 加上滤镜之后的代码片段: 2 3 div img{ 4 background-color: #fff; 5 -webkit-box-shadow:5px 5px 5px #000; 6 -moz-box-shadow:5px 5px 5px #000; 7 box-shadow:5px 5px 5px #000; 8 width:295px; 9 height:300px;10 /* For IE 8 */11 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=‘#000000‘)";12 /* For IE 5.5 - 7 */13 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=‘#000000‘);14 }
测试之后的效果,分别是IE5.5-IE8:
虽然差强人意,但凑合着用。如果有朋友知道除此之外的方法,能否告知一声,共同进步嘛!^_^
opacity实现透明度效果
1 div img{ 2 width:295px; 3 height:300px; 4 -webkit-opacity:0.3; 5 -moz-opacity:0.3; 6 opacity: 0.3; 7 /*for IE 6,7,8*/ 8 filter:alpha(opacity=30); 9 border:1px solid #ccc;10 }
兼容IE 6,7,8。效果(来自IE6):
transform:rotate(度数) 将元素旋转X度
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title></title> 6 <style type="text/css"> 7 div { 8 9 width:150px;10 height:50px;11 margin: 50px;12 -webkit-transform:rotate(7deg);13 -moz-transform:rotate(7deg);14 -ms-transform:rotate(7deg);15 -o-transform:rotate(7deg);16 transform:rotate(7deg);17 border:1px solid #ccc;18 }19 </style>20 </head>21 <body>22 <div>23 24 </div>25 </body>26 </html>
让我们来去W3C看看transform的兼容性:
以上代码已经实现了对以上浏览器及其版本的支持,但是IE6,7,8呢?俗话说,兵来将挡,水来土掩,山人自有妙计,只不过这妙计是借来的。