IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

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

作者:白衣书生  发布日期:2014-06-30 20:37:40
  • 收藏本文    我要投稿
  • 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呢?俗话说,兵来将挡,水来土掩,山人自有妙计,只不过这妙计是借来的。

Tag标签:样式  常用  办法  
  • 专题推荐