&nbs p;
一、引言 – 感慨
随着时间一天天的过去，各个浏览器对 CSS 3的支持也越来越成熟，CSS3的时代的到来已经成为了必然，一切只是时间问题，一切要看IE浏览器。国内对于CSS3的学习与谈论等似乎过于平静的，静的就像一潭死水一样。考虑到IE浏览器为王的 现状 ，这一切也很好理解。每当看到 国外 对于CSS3与 HTML 5争论研究如火如荼的时候，我心中总是有一丝哀叹，叹息我们又一次的落后于他人。让我想到生物产业（我的 大学 专业），国家是想通过生物振兴国家前沿 科技 ，在 国际 生物领域有一席之地的，但是几十年过去了， 美国 已经成功合成人造生命，我们呢？我想到了我出国的或是保研的 同学 们，在中国现在这个大环境下，要想取得举世瞩目的生物学成就实在是任重道远。我现在就有一丝无奈，想尽自己的力为国内的前端 发展 做 一点 贡献，但是，每每看到当前现状，一丝杯水车薪，海中虾米之感油然而生。然而，我还会继续，岂因音小不呐喊，声弱不疾呼。
我前不久介绍了一个让IE6/IE7/IE8支持常见CSS3属性的方法的 文章 “让IE6/IE7/IE8浏览器支持CSS3属性”，那里是使用的htc文件+V ML 语言实现的，轻量实用。而本文即将介绍的CSS3 JavaScript库 cssSandpa PE r 采用的则是不同的原理使IE浏览器支持CSS3属性，说穿了很 简单 ，就是IE滤镜。下面就 开始 详细介绍：
二、cssSandpaper概述
cssSandpaper的主要作者是：
@zoltandulac，原文介绍地址为：http://www.useragentman .COM /& # 8230;ipt-li br ary/
cssSandpaper是一个CSS3的JavaScript库，使用特定的CSS书写规则可以让页面元素支持CSS3的一些特性，例如，旋转，拉伸，盒阴影，渐变等效果，包括IE浏览器。由于cssSandpaper实现IE下的CSS3效果全部都是使用的filter滤镜实现的，所以其中就有不少局限性，例如IE中没有支持 圆 角的滤镜，所有cssSandpaper无法实现圆角效果，同样的 原因 ，IE浏览器下box -s hadow没有模糊过渡，不支持径向渐变等。然而，还是可以实现不少炫酷的效果的。
一旦调用了cssSandpaper CSS3 JavaScript库文件后，实现CSS3效果的调用也比较特别，需要使用特定的前缀样式写法，而且很 重要 的是cssSandpaper支持JavaScript，也就是说，可以通过js设置，动态 改变 各个浏览器（包括IE）CSS3表现，这往往可以用来实现一些精湛的UI表现。进入下一节。
三、cssSandpaper下精湛UI效果展示
1. cssSandpaper下兼容性三维立方体效果
所谓一图甚千言，看下面的效果截图，截自IE6浏览器：
您可以狠狠地点击这里：cssSandpaper下三维立方体效果demo
此效果主要是使用的CSS3中的transform属性实现的，这个下面会详细介绍。
2. cssSandpaper下时钟效果
效果如下截图，截自IE6浏览器，图中的秒钟是会走动的哦~~
您可以狠狠地点击这里：cssSandpaper下时钟效果demo
此效果主要是应用的了CSS3 ani MATE 动画效果实现的。
三、如何使用cssSandpaper库
1. 下载js文件
原始完整 源 文件(en)：cssSandpaper.1.1a- beta1 .zip
纯粹js文件打包(已处理)：cssSandpaper.zxx.js.zip (22.8K)
注意：原网站源文件的js有个小小问题，就是额外调用了一个差不多10K的EventHelpers.js，而这个js是用来对浏览器事件做优化 统一 处理的，实际上是可以省略的。于是我对cssSandpaper.js做了点简单的修改，使其脱离EventHelpers.js也能 正常 使用，于是，只要调用三个js文件就可以了，而 原来 的需要调用4个js文件。所以，我是建议您下载处理后的“纯粹的js打包”。
2. 调用JavaScript文件
调用的代码如下所示：
<script src="/study/js/cssQuery-p.js"></script> <script src="/study/js/jcoglan.com/sylvester.js"></script> <script src="/study/js/css3Helpers.js"></script>
3. 使用
对CSS3有所 了解 的同行 应该 知道 ，许多属性的应用需要有特定的私有前缀，例如Firefox下的-moz-box-shadow，或是-moz-border-radius等，这里，您一旦应用了cssSandpaper库，则CSS文件中无需针对不同的浏览器书写不同的前缀了，因为库文件已经帮你解决了。您所需要使用的是针对cssSandpaper库的特殊的前缀，那就是 -sand- ，因此，您可以在CSS中设置诸如下面的一些属性：
-sand -t ransform: rotate(-30 deg ) skew(-30deg, 0deg); background -i mage: -sand-gra die nt(linear, center top, center bottom, From (#EBE5DE), to(#ea9b3d) ); -sand-box-shadow: 15px 15px #f fc ccc;
cssSandpaper库还有的一点强大之处在于其可以使用js进行兼容性的设置，拿 transform 属性举例，按照我们现在对DOM元素CSS属性设置的理解，设置一个元素的 transform 属性代码应该类似下面的：
node.style.transform = "rotate(25deg)";
这在写法上是没错的，但是考虑到目前IE浏览器对其不支持，所以其通用性有限。在cssSandpaper库环境下，有了兼容性的替代方法，参见如下的代码：
cssSandpaper.setTransform(node, "rotate(25deg) scale(2, 2) skew(20deg, 20deg)"); cssSandpaper.setOpac IT y(node, 0.3); cssSandpaper.setBoxShadow(node, "10px 10px 5px #ffcccc"); cssSandpaper.setGradient(node, "-sand-gradient(linear, center top, center bottom, f rom (#0000ff), to(#ff0000));")
关于此更为实际的应用，您可以参见下面的实例属性展示。
本文作者：张鑫旭，来自张鑫旭-鑫空间-鑫 生活 (http://www.zhangxinxu.com/word Press /)
本文地址：http://www.zhangxinxu.com/word PR ess/?p=818 访问原出处，更多你未见过的前端技 术 。
四、属性之-sand-transform
功能作用就是允许对HTML元素进行旋转，伸缩以及斜切。语法如下：
#cont ai ner { -sand-transform: <function-list> ; } 此处的 <function-list> 表示方法列表，支持的方法见下表：
| rotate(angle) | 旋转HTML元素。 angle 可以是角度(例如： rotate(30deg) )， 或者 是弧度，如 rotate(1.3rad) |
| scale(sx[, sy]) | 缩放HTML元素。 sx 和 sy 都是数值，如果是 1 ，则表示保持原大小，如果是 2 ，则为原来2倍大小，依次类推。如果 sy 未指定，则其余 sx 是一样的大小。类似的方法为 scaleX(sx) 和 scaleY(sy) . |
| translate(tx, ty) | 从对象的当前位置进行偏移(水平和垂直移动)HTML元素。(与CSS的 top 和 left 相反，其从浏览器的视角移动物体。 tx 和 ty 表示水平的和垂直的偏移位置。 internet E xp lorer浏览器要在版本 1.1 beta 1中才引入了此方法。 |
| skew(ax[, ay]) | 通过指定角度或是弧度倾斜元素的x轴和y轴。如果 ay 为提供，则其被当做 0deg 处理。 |
| matrix(a, c, b, d, tx, ty) | 通过指定6个值应用2D 转换矩阵。如果您不了解线性代数或是矩阵算法，那么要理解此方法还是有些 困难 的。更进一步的信息，您可以参阅这里维基 百科 值转换举证这篇文章。 如果您熟悉矩阵乘法，您可以注意到c和b是相反的。 |
一些应用实例
1. 旋转
例如下面的一个和简单的旋转45度的效果图：
您可以狠狠地点击这里：旋转实例demo
上述效果的核心的CSS代码如下：
-sand-transform:rotate(45deg);
这里IE下旋转效果的实现是使用的IE滤镜，关于元素的旋转，我在之前有过非常详细的介绍，您有兴趣可以参见我的“ 图片旋转 效果的一些研究、 jq uery插件及实例”这篇文章。相信会让您对元素旋转有进一步的认识的。
2. 斜切
不管 怎样 ，先看效果图：
上面效果的核心CSS代码如下：
-sand-transform: skew(45deg, 0deg);
您可以狠狠地点击这里：斜切效果实例demo
五、属性之-sand-box-shadow
实现 块状元素 的投影效果，语法如下：
#container { -sand-box-shadow: <horizontal-offset> <vert ical -offset> <blur-radius> ; } 实例
您可以狠狠地点击这里：盒阴影效果实例demo
关于CSS3 盒阴影的介绍，您可以参见这里。
在本实例中，由于IE滤镜不支持投影的模糊，所以无法实现逼真的投影效果。而在本文开头提到的使用VML语言实现的CSS3效果中，是可以让IE浏览器有 平滑 过渡飞投影效果的。
六、属性之-sand-gradient
实现元素的渐变效果，包括线性渐变和径向渐变（IE不支持）。语法如下：
#container { background-image: -sand-gradient( <type>, <start-point>, <end-point>, <color-stop1>, <color-stop2>, .. ., <color-stopN> ) } 关于语法的一些参数，关于CSS渐变背景，您可以参见我之前写的3篇文章（CSS渐变之CSS3 gradient在Firefox3.6下的使用 、CSS gradient渐变之 webkit 核心浏览器下的使用 、CSS实现兼容性的渐变背景(gradient)效果 ），里面针对不同浏览器的渐变都做了非常详细的介绍。
下图为本实例中的效果截图：
您可以狠狠地点击这里：渐变效果实例demo
IE浏览器下是无法实现径向渐变的。
六、属性之opacity
opacity 属性最简单了，后面直接跟一个0~1的数值就可以了，不需要任何的前缀。
#container { opacity: <opacity-level; ; } 由于较为简单，就不上图，不上demo了。
七、cssSandpaper已知的一些问题
目前，当用户改变 font-size 大小的时候，在IE下，布局会有一点混乱。 opera 10.5 仅部分工作，原因原作者也在解决中。 IE下，如果有透明背景，或是背景含有透明通道，则会产生丑陋的像素点块。由于这块CSS3 JavaScript库刚出来，不成熟的地方还很多， 在后 续的版本中会依次修复各类问题的。
八、我的一些看法
虽然我花了很多的时候对这个JavaScript库做了了解并写下这篇长长的文章，但是并不表示我对这个JavaScript库的支持。用我打心眼里的话讲就是：“这个破玩意，看看就好，没多大实用 价值 ”。
首先，至少要调用三个JS文件，反正我是无法忍受的，其次，所有IE浏览器下的模拟的些CSS3效果都是使用的IE滤镜，我实在是对IE 滤镜的性能消耗表示怀疑啊。还是少用为妙。 不过 ，对于拓展前端技能，了解CSS3的属性还是很有帮助的。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-cssSandpaper-兼容IE的CSS3 JavaScript库 全部内容，希望文章能够帮你解决 html5教程-cssSandpaper-兼容IE的CSS3 JavaScript库 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-cssSandpaper-兼容IE的CSS3 JavaScript库的详细内容...