box-shadow参数顺序为水平偏移、垂直偏移、模糊半径、扩展半径（可选）、颜色，前两者必填，模糊半径不可为负，漏写会导致声明失效；多层阴影须用逗号分隔于同一声明中。
box-shadow 参数怎么填才不出错
直接写 box-shadow: 10px 10px 5px #000 看似简单，但四个关键参数顺序和含义常被搞反：水平偏移、垂直偏移、模糊半径、扩展半径（可选）、颜色。漏掉扩展半径时不能加逗号跳过，否则整个声明失效；模糊半径为 0 时边缘锐利，但设成负数会报错——CSS 不支持负模糊值。
常见错误现象：box-shadow 完全不显示，大概率是父容器 overflow: hidden 裁剪了阴影，或元素本身没宽高（比如空 div）；也可能是颜色写成 #0000 这种非法十六进制（必须 3 位或 6 位）。
实操建议：
- 用 Chrome DevTools 实时修改
box-shadow值，拖动滑块比手敲更快 - 多层阴影用逗号分隔，如
box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.1) - 想让阴影只出现在某一边？把对应方向的偏移设大，另一方向设为
0，再配合小模糊值，例如只下阴影：box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1)
用 range 输入框实时控制 box-shadow
纯 HTML + CSS 能做基础调节，但要真正“可视化”，必须靠 JavaScript 绑定 <input type="range">。每个滑块对应一个参数，监听 input 事件（不是 change），才能拖动时即时响应。
关键细节：
- 水平/垂直偏移滑块范围建议设为
-50到50，步长1；模糊和扩展半径从0开始，上限100 -
rgba()颜色里的 alpha 通道单独用一个滑块控制，避免用户手动输透明度 - 别忘了给预览区域加
border: 1px solid #eee，否则阴影在白底上根本看不清
示例核心逻辑：
document.getElementById('blur').addEventListener('input', () => {
const blur = document.getElementById('blur').value;
preview.style.boxShadow = `${hOffset}px ${vOffset}px ${blur}px ${spread}px ${color}`;
});
内阴影 inset 怎么安全启用
inset 是 box-shadow 的可选关键字，加在参数最前面，比如 box-shadow: inset 0 0 10px #000。但它不能和外阴影混写在同一声明里——要么全是外阴影，要么全是内阴影。
容易踩的坑：
- 勾选“内阴影”后忘记清空已有外阴影值，导致样式冲突失效
- 内阴影在无背景色的元素上几乎不可见，务必同步设置
background-color - 用
inset模拟凹陷按钮时，注意搭配border和padding，否则边缘发虚
实操建议：把 inset 做成独立开关，JS 中用布尔值拼接字符串，避免硬编码空格或遗漏空格。
导出 CSS 代码时要注意哪些兼容性
生成器最后一步是“复制 CSS”，但直接输出 box-shadow 可能忽略旧浏览器。IE9+ 支持标准语法，但 IE8 及更早需滤镜（已淘汰，不必兼容）；Safari 5.1 以前对 rgba() 阴影支持不稳定。
真正该关心的是现代场景：
- 如果目标是微信内嵌页或钉钉 H5，iOS Safari 13.4+ 没问题，但安卓 WebView 版本碎片化，稳妥起见模糊半径别超
30px，避免渲染卡顿 - 深色模式下阴影颜色若写死
#000，在prefers-color-scheme: dark下会过重，建议默认用rgba(0,0,0,0.15)这类相对透明度 - 导出时自动补全厂商前缀已无必要，Chrome/Firefox/Safari 当前稳定版均原生支持
box-shadow
复杂点在于多层阴影的可读性——自动生成的代码未必带换行缩进，用户复制后难以二次编辑。加个“格式化输出”按钮，用 \n 和空格组装字符串，比一行坨更实用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
