CSS | 阴影（）函数

CSS阴影函数用于为元素添加阴影效果，可以设置元素的阴影颜色、模糊度、偏移量、扩散半径等。该函数可用于盒子、文本和图像等元素。

语法

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

参数说明

属性值|说明 -|- h-shadow|必需，表示水平阴影距离，可正可负 v-shadow|必需，表示垂直阴影距离，可正可负 blur|可选，表示阴影模糊度，值越大越模糊，默认为0 spread|可选，表示阴影的扩散半径，值越大阴影越大 color|可选，表示阴影颜色，默认为黑色 inset|可选，表示阴影浮于元素之下，作为内阴影

示例

盒子阴影

.box {
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}

上述代码表示，为.box元素添加一个向右向下偏移5px的黑色阴影，阴影的模糊度为10px，扩散半径为0px。

文字阴影

.text {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

上述代码表示，为.text元素中的文字添加一个向右向下偏移2px的黑色阴影，阴影的模糊度为3px。

图片阴影

.img {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.8);
}

上述代码表示，为.img元素所嵌套的图片添加一个黑色阴影，阴影的模糊度为5px，扩散半径为0px。

兼容性

box-shadow属性兼容IE9及以上浏览器，text-shadow属性兼容IE10及以上浏览器。

总结

CSS阴影函数能为各种元素添加阴影效果，可以通过调整参数来获得不同的阴影效果，是网页设计中常用的样式之一。