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的阴影。