码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-06-30 22:45:40      阅读:367      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   width   

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:

bubuko.com,布布扣

                     图0-0

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

bubuko.com,布布扣

                     图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:

bubuko.com,布布扣                                             bubuko.com,布布扣

                                                                                                                                                                     

注意:首先,在 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下的效果显示:

bubuko.com,布布扣

接下来要做的事情,想必读者朋友都知道了,兼容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:

bubuko.com,布布扣

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

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):

bubuko.com,布布扣

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的兼容性:

bubuko.com,布布扣

以上代码已经实现了对以上浏览器及其版本的支持,但是IE6,7,8呢?俗话说,兵来将挡,水来土掩,山人自有妙计,只不过这妙计是借来的。

几个常用的CSS3样式代码以及不兼容的解决办法,布布扣,bubuko.com

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

标签:style   blog   http   color   使用   width   

原文地址:http://www.cnblogs.com/maplechow/p/3808554.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!