CSS3 Shadows浏览器支持情况
text-shadow 和 box-shadow 这两个属性在主流现代浏览器上得到了很好的支持( > Chrome 4.0, > Firefox 3.5, > Safari 4.0, > Opera 9.6, > IE10)。
text-shadow 和 box-shadow 的不同之处:
box-shadow语法:
text-shadow语法:
这里只有几个不同点:
不能为文本创建一个内阴影
有文字阴影没有扩散距离
但是可以创建多个阴影(显示在彼此的顶部)。
text-shadow学习
color 和 offsets
在下面的例子中,我们定义了水平和垂直偏移和自定义颜色
注意,正值使阴影往右/下移动,负值往左/上移动
阴影的颜色是可选的,如果颜色没填,就使用从父级继承的颜色。然而,在不同的浏览器下可能会有所不同,所以我建议定义颜色项(RGB或RGBA和HSLA等)。
blur
在下面的例子中,我们定义了各种模糊:
模糊是可选的参数,它定义了距离模糊。它应该是一个正数(因为0意味着没有模糊)。下面的图片,说明它是如何工作的:
新闻热点
疑难解答