在CSS中如何通过box-shadow多重阴影模拟多层内边框效果？-css教程-PHP中文网

inset阴影默认在底层，必须置于box-shadow列表最前面才能浮出当高光；模拟内边框需设blur为0或0.1px，用spread控制宽度；ios上应避免小数圆角、超3层及过低alpha值。

在css中如何通过box-shadow多重阴影模拟多层内边框效果？

box-shadow 写 inset 时为什么内边框总在最底下？

因为浏览器按逗号顺序从左到右绘制阴影，inset 默认被当作“底层投影”处理——哪怕你写在最后，它也沉在所有外阴影下面。想让它浮在表面当高光，必须放在阴影列表最前面：box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset, 0 0 0 4px #333, 0 0 0 6px #666。漏掉这一步，inset 就永远被盖住。

用 box-shadow 模拟内边框，blur 必须为 0 吗？

是的，只要想保持“边框”的清晰锐利感，blur 就得设成 0 或 0.1px（iOS Safari 对 0 支持不稳）。否则模糊会向外晕染，边缘发虚、叠层错位。正确写法是靠 spread 控制宽度：0 0 0 2px #000 是 2px 宽实线，0 0 0 4px #666 是包在外面的 4px 宽层——注意第二层的 spread 值不是 2px，而是 4px，因为它是从元素边界整体外扩出来的。

CSS婚礼策划服务机构宣传网站模板

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

下载

多层 inset 边框怎么避免 iOS 上糊边或断裂？

iOS Safari 对 inset 阴影特别敏感，尤其在圆角和 DPR 高的屏幕上：

border-radius 别用小数，比如 5.5px → 改成 6px 或 5px
层数别超 3 层；真机上第 4 层大概率被静默丢弃
避免 rgba(0,0,0,0.05) 这类极低 alpha，旧 WebView 会四舍五入为 0
所有 spread 值建议控制在 ±4px 以内，超过容易像素断裂

为什么加了 margin 也对不齐多层内边框？

因为 box-shadow 的 inset 是从 border-box 内边缘向内画的，而 border 本身占空间、影响盒模型。如果你同时用了 border 和 inset 阴影，两者的起点不同，视觉上就会错层。可靠做法是：只用 box-shadow 模拟全部边框，border 设为 none，再用 padding 或 width/height 手动预留空间。否则，哪怕 margin 算得再准，DPR 变化或缩放时也会偏移。