css文字阴影颜色怎么设置_使用text shadow指定颜色

文字阴影颜色由text-shadow第四个参数设置，格式为“水平偏移 垂直偏移 模糊半径 颜色”，支持十六进制、rgb、rgba、hsl及关键字；多层阴影用逗号分隔，从左到右层叠。

文字阴影颜色通过 text-shadow 属性的第三个参数（可选）直接设置，格式为：水平偏移 水平偏移 阴影模糊半径 颜色。颜色可以是十六进制、rgb、rgba、hsl 或颜色关键字。

基础语法与颜色写法

text-shadow 的完整语法是：
text-shadow: ;

• 前两个值（如 2px 2px）表示阴影相对于文字的横向和纵向偏移，必填
• 第三个值（如 4px）控制阴影模糊程度，可省略（默认为 0）
• 第四个值就是颜色，必须显式写出；若省略，浏览器会使用文字当前的 color 值

常用颜色写法示例

以下写法均合法，可按需选用：

• text-shadow: 1px 1px 2px #333; —— 十六进制
• text-shadow: 1px 1px 2px rgb(51, 51, 51); —— RGB
• text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); —— 半透明黑色（推荐用于柔和效果）
• text-shadow: 1px 1px 2px hsl(0, 0%, 20%); —— HSL
• text-shadow: 1px 1px 2px darkgray; —— 颜色关键字

多层阴影与颜色叠加

用逗号分隔多个阴影，每层可独立设颜色：

• text-shadow: 1px 1px 0 #ff6b6b, 2px 2px 0 #4ecdc4; —— 双色硬边阴影
• text-shadow: 0 0 8px rgba(255, 215, 0, 0.7), 0 0 16px rgba(255, 140, 0, 0.4); —— 金色发光效果

注意：层叠顺序从左到右，先写的在下层，后写的在上层。

避免常见错误

• 漏写颜色值，又没设置 color —— 阴影可能不可见或继承父级颜色，建议显式声明
• 模糊半径为 0 时仍加空格（如 1px 1px 0 red）—— 正确；但写成 1px 1px red 会被解析为 1px 1px 0 red，虽可行但不清晰，建议补全
• 在深色背景上用纯黑阴影（#000）—— 对比弱，可改用更暗或带透明度的色值提升辨识度