box-shadow 四参数需平衡：h/v-offset控方向距离，blur-radius宜4–8px防虚，spread-radius负值可收紧阴影；text-shadow多层叠加实现描边或立体字，避免滥用拖慢性能。
box-shadow 的四个参数怎么配才不糊不飘
box-shadow 默认是「模糊+偏移」组合，但很多人调出来不是太虚就是飞出屏幕。关键在 h-offset、v-offset、blur-radius、spread-radius 这四个值的平衡：
-
h-offset和v-offset决定阴影落点方向和距离，0 表示居中，负值可让阴影出现在元素上方或左侧 -
blur-radius为 0 时边缘锐利；超过 10px 后容易发虚，移动端建议控制在 4–8px -
spread-radius是可选的第四个参数，正值扩大阴影面积（常用于卡片浮起效果），负值则收缩——但过度负值会导致阴影被裁剪 - 记得加
color，否则浏览器用默认黑色，暗色背景上直接看不见
比如给按钮加轻微浮层：box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1) —— 这里 -1px 的 spread 让阴影更紧凑，rgba 控制透明度避免生硬。
text-shadow 实现文字描边或立体字的写法
text-shadow 不是只能加一层阴影，它支持逗号分隔的多组值，本质是「叠加渲染」。常见误操作是只写一个值，结果文字发虚或看不出效果：
- 单层描边：用
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000模拟粗描边（注意第三项blur-radius设为 0） - 立体字效果：叠加两层不同偏移的阴影，如
text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #999，第二层更深更远，模拟光照角度 - 不要对大段正文滥用
text-shadow，尤其带 blur 的，在低分辨率屏上会明显拖慢渲染性能
box-shadow 在 flex 或 grid 容器里失效？检查这三点
阴影“消失”往往不是语法错，而是被父容器裁剪或层级遮挡：
立即学习“前端免费学习笔记（深入）”；
- 父元素设置了
overflow: hidden，而阴影超出边界——改用overflow: visible或给父容器加padding预留空间 - 子元素用了
transform: scale()或position: absolute，导致阴影渲染层被压缩或脱离文档流，加will-change: transform或临时用z-index调整层级 - 使用了
backface-visibility: hidden（常见于动画优化），会意外禁用box-shadow渲染，去掉即可
阴影颜色用 rgba 还是 hsla？别忽略 alpha 通道的兼容性
现代浏览器都支持 rgba() 和 hsla()，但老版本 Safari（hsla() 的 alpha 支持不稳定，而 IE11 完全不支持透明色：
- 稳妥方案：用
rgba(0,0,0,0.15)，所有支持box-shadow的浏览器都认这个 - 想动态控制透明度？别用 CSS 变量直接插进
rgba()（不生效），改用color-mix(in srgb, black 15%, transparent)（新标准，需查 CanIUse）或 JS 动态生成 - 深色模式下阴影容易过重，可配合
@media (prefers-color-scheme: dark)降低 alpha 值，比如从0.15改成0.08
阴影看着简单，真正要控好虚实、层次、性能和响应式表现，得一个个参数抠，尤其 blur-radius 和 spread-radius 的相互影响，很容易调着调着就失去预期效果。
