CSS阴影颜色

参考资料

1. 层次/关系选择器详细说明以及案例
2. Flexbox布局有哪些常见的误区？
3. align-self: auto/stretch详细说明
4. display: flex/inline-flex示例
5. 有没有现成的Vanta.js与CSS过渡模板？
6. 如何用添加产品图片和描述？
7. CSS有哪些常用的选择器？
8. CSS浮动详细说明以及案例

CSS阴影颜色

1. 简介

CSS阴影颜色用于定义元素的阴影效果颜色，通常与box-shadow或text-shadow属性配合使用。

2. 属性

• box-shadow: 为元素添加阴影效果

• text-shadow: 为文本添加阴影效果

3. 用法

阴影颜色在box-shadow和text-shadow属性中作为可选参数出现。

语法：

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

• text-shadow: h-shadow v-shadow blur color

其中color参数定义阴影颜色。

4. 颜色值格式

阴影颜色可以使用：

• 颜色名称（如red）

• 十六进制值（如#ff0000）

• RGB/RGBA值（如rgb(255,0,0)或rgba(255,0,0,0.5)）

• HSL/HSLA值（如hsl(0,100%,50%)）

5. 示例

box-shadow示例：

div {
  box-shadow: 10px 10px 5px #888888;
}

text-shadow示例：

h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

多重阴影示例：

div {
  box-shadow: 
    5px 5px 10px red,
    -5px -5px 10px blue;
}

inset阴影示例：

div {
  box-shadow: inset 0 0 10px #000000;
}

6. 注意事项

• 如果省略颜色值，浏览器通常使用文本颜色（text-shadow）或currentColor（box-shadow）

• 阴影颜色支持透明度（通过RGBA/HSLA）

• 可以为一个元素添加多个阴影，用逗号分隔