css3是css技术的升级版本，css3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。本章内容我们将为大家讲一个简单的css3阴影效果实例。利用css3的阴影属性可以在网页的元素上加上阴影效果，这是一种新特性。不过这种特性只在支持css3的浏览器上有效果，比如：firefox3.5，safari 3.1 +，和谷歌浏览器等。
下面就说说如何使用css3的阴影属性。
css3阴影主要用到了box-shadow属性，该属性的语法格式如下：
box-shadow:
以上各属性值的意思如下：
立即学习“前端免费学习笔记（深入）”；
horizontal（水平）：指定水平偏移阴影。正值（即：5px）阴影向右，而为负值（即：- 10px）将使它偏向左。
vertical（垂直）：指定垂直偏移阴影。正值（即：5px）会使阴影在框的底部，而负值（即：- 10px）将使它偏向上。
blur(模糊)：设置的柔化半径。默认值为0，这意味着没有模糊。正值增加了模糊，而负值，实际上缩小了阴影。此属性默认为0。
clolor(颜色)：颜色值,也就是设置阴影颜色。
提醒：该属性可以加在任意元素上，如图片，Div，SPAN，P标签等等都可以。
下面看一个具体的阴影示例，如下是效果示例图和具体的代码：
CSS3阴影效果实例 矩形的 CSS3 的阴影
以上这个关于css3的简单的小教程，希望能帮助到大家。
相关推荐：
