box-shadow是CSS中的一个属性,可以用来为一个元素添加阴影效果,可以让页面更加生动和立体。
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow的语法如上所示,参数有5个:
- h-shadow: 阴影的横向偏移量,必须指定。
- v-shadow: 阴影的竖向偏移量,必须指定。
- blur: 可选,模糊半径,阴影的边缘模糊的程度。
- spread: 可选,阴影的尺寸扩张或收缩的程度。
- color: 阴影的颜色,默认为黑色。
- inset:可选,是否让阴影变为内阴影。
/* 带有模糊效果的黑色外阴影 */ box-shadow: 10px 10px 10px black; /* 带有扩张效果的紫色外阴影 */ box-shadow: 5px 5px 5px 5px purple; /* 带有内阴影效果的蓝色阴影 */ box-shadow: inset 5px 5px 5px blue;
以上为示例代码。其中,第一个示例为模糊效果的黑色外阴影,分别为10px的横向和竖向偏移量,模糊半径为10px,没有尺寸扩张,颜色为黑色。
第二个示例为扩张效果的紫色外阴影,分别为5px的横向和竖向偏移量,模糊半径为5px,尺寸扩张为5px,颜色为紫色。
第三个示例为内阴影效果的蓝色阴影,分别为5px的横向和竖向偏移量,模糊半径为5px,没有尺寸扩张,颜色为蓝色。