-
border-radius实现圆角效果
1.1CSS3代码：2.23.3-webkit-border-radius:10px;4.4-moz-border-radius:10px;5.5border-radius:10px;6.6margin: 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.7width: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 浏览器提供圆角效果的支持。
01.1div{02.2-webkit-border-radius:10p;03.3-moz-border-radius:10px;04.4border-radius:10px;05.5margin: 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.6width:200px;07.7height:100px;08.8color:#fff;09.9behavior: url(ie-css3.htc);10.10}截两幅图看看效果，一幅来自IE6，一幅来自IE9：
注意:首先，在 Server 端需要引入一个 HTC 文件，经过 gzip 压缩后对 server 端和 client 端性能应该不会有太大的影响；其次，它会使你的 CSS 验证不合法；另外，这个脚本在 IE8 上有一些问题，它会使 z-index 值变成负数。因此使用时还需要小心.
box-shadow实现阴影效果
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.7div img{08.809.9-webkit-box-shadow:5px 5px 5px #000;10.10-moz-box-shadow:5px 5px 5px #000;11.11box-shadow:5px 5px 5px #000;12.12width:295px;13.13height: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.17filter: 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的滤镜。来看看效果吧。
01.1加上滤镜之后的代码片段:02.203.3div img{04.405.5-webkit-box-shadow:5px 5px 5px #000;06.6-moz-box-shadow:5px 5px 5px #000;07.7box-shadow:5px 5px 5px #000;08.8width:295px;09.9height: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.13filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color='#000000');14.14}测试之后的效果，分别是IE5.5-IE8：
虽然差强人意，但凑合着用。如果有朋友知道除此之外的方法，能否告知一声，共同进步嘛！^_^
opacity实现透明度效果
01.1div img{02.2width:295px;03.3height:300px;04.4-webkit-opacity:0.3;05.5-moz-opacity:0.3;06.6opacity:0.3;07.7/*for IE 6,7,8*/08.8filter:alpha(opacity=30);09.9border:1px solid #ccc;10.10}兼容IE 6,7,8。效果（来自IE6）：
transform:rotate(度数) 将元素旋转X度
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.7div {08.809.9width:150px;10.10height:50px;11.11margin: 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.16transform:rotate(7deg);17.17border:1px solid #ccc;18.18}19.19</style>20.20</head>21.21<body>22.22<div>23.2324.24</div>25.25</body>26.26</html>让我们来去W3C看看transform的兼容性:
浏览器及其版本的支持，但是IE6,7,8呢？俗话说，兵来将挡，水来土掩，山人自有妙计，只不过这妙计是借来的。
几个常用的CSS3样式代码以及不兼容的解决办法
转载于:https://www.cnblogs.com/hubl/p/5750552.html