如何用CSS实现内阴影效果_在box-shadow属性中添加inset参数-css教程-PHP中文网

inset必须紧接box-shadow属性名后、偏移值前书写，不可省略或错序；正确写法为box-shadow: inset 0 2px 4px rgba(0,0,0,0.2)；漏写、位置错误或元素无背景色均导致内阴影不可见。

如何用css实现内阴影效果_在box-shadow属性中添加inset参数

直接在 box-shadow 值的最前面加 inset 关键字，它不是可选配置项，而是决定阴影绘制位置的必需修饰符。漏掉或写错位置（比如放在颜色后面）都会导致浏览器忽略整个声明。

正确写法是：box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);。注意顺序不能颠倒——inset 必须紧接在属性名后、偏移和模糊值之前。

inset 和后续数值之间要有空格，但不能有逗号
多个阴影用逗号分隔，每个阴影都得单独写 inset（inset 0 1px #000, 0 2px #333 是错的；应写成 inset 0 1px #000, 0 2px #333 → 后者无 inset，就变成外阴影了）
如果同时需要内外阴影，必须显式写出两组：一组带 inset，一组不带

最常见原因是元素没有「可绘制的背景」或「足够对比度」。内阴影是叠加在元素背景之上的，如果背景是透明的、或跟阴影颜色太接近，就等于白忙一场。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

确保元素有明确背景色，比如 background-color: #fff; 或至少 background-color: rgba(255,255,255,0.9);
检查父容器是否设置了 overflow: hidden，这会裁掉内阴影超出 padding 区域的部分（内阴影默认从 border box 内侧开始绘制）
阴影的 blur 值太小（如 0）或 spread 为负且过大，也可能让阴影缩进到看不见的位置

圆角会直接影响内阴影的形状——它会严格贴合 border-radius 裁剪，而不是像外阴影那样自然发散。这意味着：圆角越大，内阴影越“收窄”，甚至在小尺寸元素上完全消失。

如果元素 border-radius: 8px，但 box-shadow: inset 0 0 10px #000，阴影可能只在四个角附近残留一点灰边
想让内阴影更明显，可以适当增大 blur 值（如 16px），或配合正的 spread 值（如 inset 0 0 12px 2px #000）把阴影往外“撑”一点
不要依赖 inset 模拟「凹陷按钮」效果时忽略文字颜色——深色内阴影配深色文字会不可读

inset 是 CSS3 标准特性，现代浏览器（Chrome 10+、Firefox 4+、Safari 5.1+、Edge 12+）都支持，IE9 及以下不支持，且无降级方案——它不会回退成外阴影，而是整条声明被丢弃。

大量使用高模糊值的 inset 阴影（尤其在滚动容器里）可能触发重绘开销，iOS Safari 上偶有闪烁
避免在 :hover 中突然开启大范围 inset 阴影，建议用 transition 缓动，且只过渡 box-shadow 属性本身（transition: box-shadow 0.2s;）
如果要兼容老 IE，只能用图片或伪元素模拟，inset 无法 polyfill