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

时间：2021-08-06 22:40:42

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

border-radius实现圆角效果

 CSS3代码：

 -webkit-border-radius:10px;

 -moz-border-radius:10px;

 border-radius:10px;

 background-color:#666;

 width:200px;height:100px;

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

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

图0-0

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

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

图0-1

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

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

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

 div{

     -webkit-border-radius:10p;

     -moz-border-radius:10px;

     border-radius:10px;

     background-color:#666;

     width:200px;

     height:100px;

     color:#fff;

     behavior: url(ie-css3.htc);

 }

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

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

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

box-shadow实现阴影效果

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

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

 <head>

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

     <title></title>

     <style type="text/css">

         div img{

             background-color: #fff;

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

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

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

             width:295px;

             height:300px;

             /* For IE 8 */

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

             /* For IE 5.5 - 7 */

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

         }

     </style>

 </head>

 <body>

     <div>

         <img src="beautiful.jpg">

     </div>

 </body>

 </html>

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

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

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

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

 div img{

             background-color: #fff;

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

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

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

             width:295px;

             height:300px;

             /* For IE 8 */

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

             /* For IE 5.5 - 7 */

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

         }

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

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

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

opacity实现透明度效果

 div img{

     width:295px;

     height:300px;

     -webkit-opacity:0.3;

     -moz-opacity:0.3;

     opacity: 0.3;

     /*for IE 6,7,8*/

     filter:alpha(opacity=30);

     border:1px solid #ccc;

 }

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

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

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

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

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

 <head>

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

     <title></title>

     <style type="text/css">

         div {

             width:150px;

             height:50px;

             margin: 50px;

             -webkit-transform:rotate(7deg);

             -moz-transform:rotate(7deg);

             -ms-transform:rotate(7deg);

             -o-transform:rotate(7deg);

             transform:rotate(7deg);

               border:1px solid #ccc;

         }

     </style>

 </head>

 <body>

     <div>

     </div>

 </body>

 </html>

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

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

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

几个常用的CSS3样式代码以及不兼容的解决办法的更多相关文章

  1. pycharm自动调整html页面代码缩进不正确的解决办法

    pycharm自动调整html页面代码缩进不正确的解决办法

  2. 出现&OpenCurlyDoubleQuote;不能执行已释放的Script代码”错误的原因及解决办法

    很多web开发者或许都遇到过这样的问题,程序莫名奇怪出现“不能执行已释放Script的代码”,错误行1,列1.对于这种消息描述不着边,行列描述更是让人迷茫的js错误,相信是所有调试js程序的朋友们最郁 ...

  3. 本地修改js代码并时时生效的解决办法

    js作为客户端语言(当然它也可以作服务端语言),非常强悍,一般情况下,我们都是在开发阶段不停的改,然后上线之后就作为稳定运行的代码. 然而有时候可能因为js写得有问题,导致上线后,某些功能无法使用,这 ...

  4. MyEclipse 编写 JSP 代码时很卡的解决办法

    在网上看到很多方法,都是尝试过,个人感觉都没有说到重点,所以收效甚微. 后来自己总结了一下: 我们都是习惯在MyEclipse 工具,双击jsp 文件打开进行编辑.这时,工具会打开窗口的 Previe ...

  5. 【原】ZenCoding中常用的CSS3样式

    用ZenCoding这么久了,总结下常用CSS3的写法,方便以后查找: Property Alias @media print {} @m box-sizing:border-box; bxz:bb ...

  6. 出现蓝屏代码0x0000007b的原因及解决办法

    出现蓝屏代码0x0000007b的原因通常是硬盘的存储控制器驱动加载错误,我们可以通过对BIOS界面进行修复来解决这个问题.下面小编将详细介绍解决蓝屏代码0x0000007b的方法,一起来看看吧 导致 ...

  7. 修改opencart extension插件代码后无法重新安装的解决办法

    有时我们在为opencart安装一些插件后,发现有些地方需要细微的调整,然后去修改插件代码重新安装,但是却没有成功.开始有点怀疑是不是不能修改代码,但也不至于啊,不然开发者怎么制作插件.应该是哪里出了 ...

  8. PyCharm代码区不能编辑的解决办法

    问题: 修改之前的Python代码时发现代码区无法编辑,无意中输入i后又可以编辑了. 解决: 原因是打开了工具中的vim Emulator编辑模式,把vim Emulator前面的勾取消即可.

  9. Eclipse修改java代码后自动重启Tomcat解决办法

    今天甚是郁闷,项目马上要上线了,早上刚到公司打开MyEclipse 10.07提示过期提示,这对于用惯了破解软件的帝国用户的我原本以为小菜一碟. 于是到网上到处找破解软件,不用多长时间,Ok 破解成功 ...

随机推荐

  1. Docker - command in docker container

    1.查看Container 里面运行的进程 在运行容器以后,可以查看里面的进程: docker top <container_id> or <container_name> 2 ...

  2. grape动态PHP结构（二）——管理后台

    一.概述

  3. spring MVC原理

    spring MVC原理   Spring MVC工作流程图   图一   图二    Spring工作流程描述       1. 用户向服务器发送请求,请求被Spring 前端控制Servelt D ...

  4. Requests&colon;Python HTTP Module学习笔记（二）（转）

    在上一篇日志中对Requests做了一个整体的介绍,接来下再介绍一些高级的用法,主要资料还是翻译自官网的文档,如有错漏,欢迎指正. 参考资料:http://docs.python-requests.o ...

  5. iOS开发多线程篇—单例模式（ARC）

    iOS开发多线程篇—单例模式(ARC) 一.简单说明: 设计模式:多年软件开发,总结出来的一套经验.方法和工具 java中有23种设计模式,在ios中最常用的是单例模式和代理模式. 二.单例模式说明 ...

  6. Swift&colon; Initialization-1

    初始化的过程包括为每一个存储属性设置一个初始值和其他步骤.通过定义构造函数来实现初始化的过程,跟oc的初始化函数不同,Swift的构造函数不返回一个值.它们的主要角色是确保一个类型的实例在初次使用前被 ...

  7. 【JAVAEE学习笔记】hibernate03：多表操作详解、级联、关系维护和练习&colon;添加联系人

    一.一对多|多对一 1.关系表达 表中的表达 实体中的表达 orm元数据中表达 一对多 <!-- 集合,一对多关系,在配置文件中配置 --> <!-- name属性:集合属性名 co ...

  8. vue2&period;0之axios使用详解

    axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用 功能特性 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 htt ...

  9. CodeForces - 344E Read Time &lpar;模拟题 &plus; 二分法&rpar;

    E. Read Time time limit per test 1 second memory limit per test 256 megabytes input standard input o ...

  10. centos7使用yum安装软件提示 cannot find a valid baseurl for repo&colon;base&sol;7&sol;x86&lowbar;64 的解决方法

    由于是本地yum源安装软件,无法联网,因此使用yum安装软件时报了错,解决方法是: 打开vi /etc/resolv.conf文件 新增内容如下: nameserver 8.8.8.8 nameser ...

相关文章