css3中阴影框

CSS3提供了众多的新特性，其中之一就是阴影框。使用阴影框可以为图片、文本等元素添加阴影效果，从而使页面显得更加美观。

/* 添加一个水平阴影 */
.shadow {
box-shadow: 10px 0px 5px 5px #888888;
}

上述代码中，box-shadow属性用于添加阴影效果。其中，第一个值10px表示阴影相对于元素的水平偏移量，第二个值0px表示阴影相对于元素的垂直偏移量。第三个值5px表示阴影的模糊半径，值越大则阴影越模糊，反之则越清晰。第四个值5px表示阴影的扩散半径，值越大则阴影越弥散，反之则越集中。最后一个值#888888表示阴影的颜色。

/* 添加一个内侧阴影 */
.shadow {
box-shadow: inset 10px 0px 5px 5px #888888;
}

上述代码中，加入了一个新的关键字'inset'，它表示内侧阴影，即阴影效果在元素内部。其他的参数同样适用。

/* 添加多个阴影 */
.shadow {
box-shadow: 10px 0px 5px 5px #888888, -10px 0px 5px 5px #888888;
}

上述代码中，使用逗号分隔多个阴影效果，从而实现添加多个阴影效果。

总之，在使用阴影框时，要根据具体情况灵活运用各种参数，从而达到最好的效果。

查看更多关于css3中阴影框的详细内容...