css阴影颜色怎么设置

参考资料

1. 如何提高Flex布局的性能？详细说明
2. 如何避免Flex容器高度塌陷？
3. 如何优化Flexbox布局的性能？
4. css阴影效果属性效果是什么
5. Flex布局与Grid布局的对比？
6. 有没有推荐的 CSS 过渡动画库？
7. display: flex/inline-flex示例
8. CSS 阴影效果属性

CSS阴影颜色设置

1. 属性介绍：

• box-shadow：用于元素边框阴影

• text-shadow：用于文本阴影

• drop-shadow()：滤镜效果中的阴影

2. 基本语法：
   box-shadow: h-offset v-offset blur spread color inset;
   text-shadow: h-offset v-offset blur color;

3. 颜色值设置方式：

• 关键字：black, white, red等

• 十六进制：#RRGGBB或#RGB

• RGB/RGBA：rgb(255,0,0)或rgba(255,0,0,0.5)

• HSL/HSLA：hsl(0,100%,50%)或hsla(0,100%,50%,0.5)

4. 用法示例：

/* 盒子阴影 */
.box {
 box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

/* 文本阴影 */
.text {
 text-shadow: 2px 2px 4px #ff0000;
}

/* 多重阴影 */
.multi-shadow {
 box-shadow:
   3px 3px 5px blue,
   -3px -3px 5px red;
}

/* 内阴影 */
.inset-shadow {
 box-shadow: inset 0 0 10px #000000;
}

/* 滤镜阴影 */
.filter-shadow {
 filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}