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)—— 对比弱,可改用更暗或带透明度的色值提升辨识度