box-shadow详解(包括例子)

box-shadow css

box-shadow是CSS3中的一个属性,它可以在元素周围添加一个或多个阴影。

语法格式为:

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

其中各个参数的含义如下:

  • h-shadow:必需,表示水平阴影的位置,可以为负数;
  • v-shadow:必需,表示垂直阴影的位置,可以为负数;
  • blur:可选,表示模糊程度,值越大,阴影就越模糊,默认为0;
  • spread:可选,表示阴影的扩展距离,正值会使阴影变大,负值会使阴影变小,默认为0;
  • color:可选,表示阴影颜色,默认为黑色;
  • inset:可选,如果设置为inset,则表示插入阴影,即内阴影;否则为外阴影。

示例代码:

.box {
  box-shadow: 10px 10px 5px #888888;
}

以上代码将会在.box元素周围添加一组水平阴影和垂直阴影均为10px,模糊程度为5px,阴影颜色为#888888的阴影。

box-shadow详解(包括例子)

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注