CSS3 box-shadow属性实例详解

什么是box-shadow

在CSS3中，box-shadow属性是用来创建元素的阴影效果，可以给框架添加立体感。

box-shadow的语法及参数

box-shadow属性有若干个参数组成，使用英文逗号分隔。语法如下：

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

参数解释：

• h-shadow（必需）：水平方向上的阴影偏移量，可以为正数或负数，如果为正数则是向右侧偏移，为负数则是向左侧偏移。
• v-shadow（必需）：垂直方向上的阴影偏移量，可以为正数或负数，如果为正数则是向底部偏移，为负数则是向顶部偏移。
• blur（可选）：模糊半径，如果值越大，阴影就越模糊，如果值为0，阴影就是清晰的。
• spread（可选）：阴影的扩展半径，可以为正数或负数，如果为正数则是扩展，为负数则是收缩，它的默认值为0。
• color（必需）：阴影的颜色，可以使用CSS中支持的颜色格式，如#xxxxxx、rgb(x,x,x)、rgba(x,x,x,x)等。
• inset（可选）：设置阴影为内阴影（inset），默认情况下是外阴影。

box-shadow的示例

以下是两个使用box-shadow的示例。

示例1：创建边框阴影

.box {
  width: 200px;
  height: 200px;
  box-shadow: 0 0 10px 2px #888888;
}

该示例中，创建了一元素宽高均为200px的边框阴影，阴影的颜色为#888888，阴影的模糊半径为10px，阴影的扩展半径为2px。

示例2：创建内阴影

.box {
  width: 200px;
  height: 200px;
  box-shadow: inset 0 0 10px 2px #888888;
}

该示例中，创建了一个宽高均为200px的方形元素，内阴影的模糊半径为10px，扩展半径为2px，颜色为#888888。