淘先锋技术网

首页 1 2 3 4 5 6 7

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,没有尺寸扩张,颜色为蓝色。