CSS3中box-shadow的用法介绍

第一步：了解box-shadow

box-shadow是CSS3中用来创建阴影的属性，它可以为一个元素添加一个或多个阴影。box-shadow的语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，各个参数如下：

• h-shadow: 必选，表示水平阴影的位置，可取正值（阴影在右边）或负值（阴影在左边），例如10px;
• v-shadow: 必选，表示垂直阴影的位置，可取正值（阴影在下方）或负值（阴影在上方），例如10px;
• blur: 可选，模糊半径，表示阴影的模糊程度，值越大阴影越模糊，通常取正值，例如5px;
• spread: 可选，阴影的大小，通常取正值，例如15px;
• color: 可选，阴影的颜色，可以使用颜色名称、十六进制值、rgb值等，例如#666;
• inset: 可选，如果设置为inset，则表示阴影在元素内部。

第二步：示例说明

1. 为一个按钮添加阴影效果

button {
  box-shadow: 0px 2px 2px 0px #999;
}

以上代码表示为button元素添加一个水平偏移量为0，垂直偏移量为2px，模糊半径为2px，大小为0的阴影，颜色为#999。

1. 为一个图片添加立体效果

img {
  box-shadow: 0px 0px 10px 5px #ccc;
}

以上代码表示为img元素添加一个水平偏移量为0，垂直偏移量为0，模糊半径为10px，大小为5px的阴影，颜色为#ccc。

这样，我们就可以使用CSS3中的box-shadow属性来为元素添加阴影效果，从而使网页看起来更加美观。