html中背景加阴影,简单介绍CSS3中的阴影、背景和圆角边框样式

CSS2.1 发布至今已有7年的历史。CSS3的出现就是增强CSS2.1的功能，减少图片的使用次数以及解决HTML页面上的特殊效果

当前，CSS3技术最适合在移动Web开发中使用的特性包括：

●增强的选择器

●阴影

●强大的背景设置

●圆角边框

阴影：

现在的CSS3样式已经支持阴影样式效果。目前可使用的阴影的效果分为两种：文本内容的阴影效果和元素的阴影效果。

box-shadow

CSS3的box-shadow属性是让元素具有阴影的效果，其语法如下：box-shadow: | color:

其中第一个 length 是阴影水平偏移值;第二个length值是阴影垂直偏移值;第三个值是阴影模糊值。水平和垂直偏移值可取正负值，如4px或-4px.

目前box-shadow已经得到大部分现代浏览器的支持。可是，当我们在基于Webkit的Chrome和Safari等浏览器上使用该属性时，需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则要写成-moz-box-shadow的形式。

下面代码为使用box-shadow的简单示例，该示例兼容Chrome、Safari及Firefox浏览器：

p

{

/* 其他浏览器 */

box-shadow: 3px 4px 2px #000;

/* webkit内核浏览器 */

-webkit-box-shadow: 3px 4px 2px #000;

/* Firefox浏览器 */

-moz-box-shadow: 3px 4px 2px #000;

padding:5px 4px