通过CSS3的box-shadow属性设置块阴影
2013-11-27 11:43
323 查看
早些时候,我们为了给一个块元素设置阴影的时候,只能通过给该块级元素设置背景来实现,当然在IE下还可以通过微软的shadow滤镜来实现,不过也只在ie下有效,那它的兼容性也就可想而知了。但是CSS3的box-shadow属性的出现使这一问题变得简单了,下面我们来看一下box-shadow属性的具体用法。
box-shadow的语法是这样的:
[box-shadow:inset x-offset y-offset blur-radius spread-radius color;]
用汉语解析就是:
[box-shadow:投影类型 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;]
下面我们分别介绍一下这几个参数:
投影类型:可选值,可取唯一值inset。如果不设置,默认的投影方式是外阴影;如果取值“inset”,就是将外阴影变成内阴影
X轴偏移量:可取正值也可取负值。当取正值时,阴影在对象右边;反之,阴影在对象左边
Y轴偏移量:可取正值也可取负值。当取正值时,阴影在对象下边;反之,阴影在对象上边
阴影模糊半径:可选值。当取0时,其阴影没有模糊效果,取值越大阴影越模糊
阴影扩展半径:可选值,可取正值也可取负值。当取正值时,阴影随取值的增大而变大;当取负值时,阴影随取值的减小而缩小
阴影颜色:可选值,但此值省略时,会取浏览器默认色,各浏览器的默认色不一样
另外,box-shadow还可以使用一个或多个投影,如果使用多个投影时需要用逗号“,”分开,如:box-shadow:3px 3px 5px #666,-2px -2px 4px #ff0000;
好了,理论性的东西基本就这些,下面我们就用代码看下效果吧。我们将对下面的矩形做阴影处理:
CSS代码:
我们在上面效果的基础上再加一个阴影扩展半径:
我们可以看到阴影大了一些
我们再看一下多阴影处理:
上面的几个都是外阴影,那么内阴影是什么样子的呢?下面我们来看一下。
我们对上面的代码稍作修改,加一个inset:
好了,不过多的演示了,你们的创意是无穷的,相信你们可以做出更酷更炫的效果。
来源:http://beyondweb.cn/article_detail.php?id=62
相关文章推荐
- 使用CSS3属性box-shadow设置div四周边框都有阴影
- CSS3之------box-shadow属性使用方法(1),即单边阴影效果设置
- css3盒子阴影box-shadow 设置
- css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性
- CSS3盒子阴影 box-shadow属性
- CSS3属性box-shadow详解[盒子阴影]
- CSS3属性box-shadow(图层阴影)的使用教程
- 如何用css3的box-shadow属性来为盒子增加阴影
- CSS3属性 box-shadow 向框添加一个或多个阴影
- css3阴影属性box-shadow
- CSS3 GENERATOR可以同时为一个元素完成border-radius、box-shadow、gradient和opacity多项属性的设置
- 【转】 CSS3阴影 box-shadow的使用和技巧总结
- CSS3阴影 box-shadow的使用和技巧总结
- CSS3阴影 box-shadow的使用和技巧总结
- 【CSS3】阴影 box-shadow(一)
- CSS3阴影 box-shadow的使用和技巧总结
- 利用css3的text-shadow属性实现文字阴影乳白效果
- CSS3 box-shadow(阴影使用)
- CSS3阴影 box-shadow的使用和技巧总结
- CSS3盒子阴影box-shadow