首页 > 网页制作 >CSS阴影颜色和透明度设置

CSS阴影颜色和透明度设置

来源：互联网 2026-07-13 08:20:02

CSSbox-shadow设置透明度应使用`rgba()`或`hsla()`，避免`#0004`或`transparent`。模糊效果由`blur-radius`控制，非透明度。多层阴影叠加时透明度非简单相加，深色层置于前。深色模式下需单独适配阴影颜色。

发现一个很常见的坑：`box-shadow` 里颜色带透明度，必须用 `rgba()` 或 `hsla()`，别写 `#0004` 或 `transparent`——后者不生效，前者在 Firefox 里直接失效。

box-shadow 的颜色透明度怎么写才有效

其实关键点就三个：括号内红绿蓝值和 alpha 值之间必须用逗号分隔，函数外和其他参数（偏移、模糊半径）用空格分隔；`#0004` 是 Chrome/Edge 实验性语法，Firefox 完全不识别，线上阴影会消失；`transparent` 不等于“带透明度的黑色”，它会被解析为 `rgba(0,0,0,0)`，结果就是没阴影。

blur-radius 和透明度不是一回事

很多人以为把 alpha 调低就能让阴影变模糊，这完全是两回事。模糊靠的是 `blur-radius` 值本身，不是靠把 alpha 压到最低来假装模糊。`box-shadow: 0 0 1px rgba(0,0,0,0.9)` 是一圈硬边浓影，而 `box-shadow: 0 0 20px rgba(0,0,0,0.1)` 才是真正柔和的大片晕染。想让阴影“融”进背景，正确的做法是先加大 `blur-radius`，再适当降低 alpha（比如从 `0.3` 降到 `0.12`）。如果 `blur-radius` 为 0，再低的 alpha 也是硬边，没有过渡。

多层阴影叠加时透明度怎么算

多层阴影叠加时，透明度不是简单相加。两层 `rgba(0,0,0,0.2)` 叠在一起，实际效果接近 `0.2 × 0.2 = 0.04`，显得过淡。所以第二层 alpha 建议设为 `0.3–0.4`，而不是照搬第一层。典型写法：`0 2px 6px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.08)`。顺序不能反：深色层必须写在前面，否则会被浅色层盖住。

深色模式下阴影容易“消失”的原因

`rgba(0,0,0,0.1)` 在白色背景上可见，在黑色背景上几乎不可见——这不是 bug，是对比度崩了。别只在默认主题下调阴影，切到深色模式后要单独适配。可用 `@media (prefers-color-scheme: dark)` 覆盖颜色，比如改成 `rgba(255,255,255,0.08)`。避免用固定灰度值（如 `#ccc`）做阴影色，它在深色模式下可能比背景还亮。最常被忽略的其实是渲染层级：给元素加了 `transform` 或 `backdrop-filter` 后，阴影可能被裁剪或发虚，这时候得检查是否意外触发了层叠上下文。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述