三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

纯css打造投影效果——CSS3属性transform的应用
作者:ONEBOYS    发表时间: 2010年11月3号,星期三     阅读:5,791 次

刚在twitter上看见这个效果。
Getting Clever with CSS3 Shadows
插播广告——“拥有css3,拥有无限可能。”

这个效果里,除了应用阴影属性box-shadow之外,还需要一个重要属性的支持——transform
其实transform算是一个混合属性,它同canvas和svg的transform一样,带有几个独立的方法:平移(translate),缩放(Scaling),旋转(Rotating),另外,还有一个斜切(Skewing)。其实,斜切和旋转是有关系的:当skewX=-skewY时,它就是一个纯粹的Rotate。

下面就是效果演示。略有改动,原demo没有考虑opera,在此补上。
所以,应该除了ie9以下的浏览器,其他所以用户都能看见效果。

————几分钟之后——————
我们发现safari竟然不支持。
但千万不要怀疑safari的transform能力。——它可是支持3D变换的。
Visual Effects Transform Functions
从中可以看出,safari的transform完全应该可以达到效果的。
(另外,safari的Transition和Animation这两个CSS属性/方法也是异常的强大)

现在把目光转向box-shadow属性。
前面我们的写法是:box-shadow: 100px 0 10px 20px rgba(0,0,0,.2);
这里有5个属性,分别表示 X偏移offset-x,Y偏移offset-y, 模糊半径blur-radius ,延伸半径spread-radius,和 color
这是据MDC的说法,-moz-box-shadow
除了这5个属性值之外,还有一个属性值inset——表示内阴影。另外,这个属性值组还可以设置多组,中间用逗号隔开。
inset值在safari下不支持,这点我们之前就有所了解。除此之外,还有没有其他差异呢?
请看:-webkit-box-shadow
原来safari下还不支持“延伸半径”值。

那么为了兼容safari,我们可以修改一下:

标签: , ,

2 条评论 发表在“纯css打造投影效果——CSS3属性transform的应用”上

  1. ONEBOYS 说:

    在safari5下测试,第一个demo也有效果。
    我之前用的safari4,达不到效果。

    回复

  2. [...] 一些细节描述在http://www.cssass.com/blog/index.php/2010/833.html [...]

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(