box-shadow 替代 border 时必须设 blur=0，因为 blur>0 会触发高斯模糊插值，导致边缘发虚、缩放断边、safari 粗细不一；只有 blur:0 时才是硬边、锐利、像素对齐的实线效果。
box-shadow 替代 border 时为什么必须设 blur=0
因为只要 blur 大于 0，阴影就会向外扩散并产生亚像素渲染，导致边缘发虚、缩放时断边、Safari 中左右粗细不一。这不是 bug，而是浏览器对高斯模糊的插值行为。
真正“像边框”的效果只在 blur: 0 时成立：此时阴影是硬边、锐利、像素对齐的。哪怕写 blur: 0.1px，也会触发模糊逻辑，失去边框质感。
-
box-shadow: 0 0 0 2px #333✅ 正确：零偏移 + 零模糊 + 正 spread = 实线外边框 -
box-shadow: 0 0 1px 2px #333❌ 错误：1px 模糊会让 2px 边框看起来像 2.5px 且边缘毛糙 - 在 125% 缩放下，小数单位（如
0.5px）会被四舍五入丢边，务必用整数
多层 box-shadow 边框的书写顺序和叠加逻辑
多层阴影用逗号分隔，但**后写的在最上层**——这点和图层直觉相反，容易写反导致白边被盖住。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
例如卡片常用“灰投影 + 白细边”效果：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 0 0 1px #fff，其中 0 0 0 1px #fff 写在后面，才能压住外层灰影，形成干净收边。
- 模拟三重边框：外虚光（大
blur+ 大spread）、中实色（blur: 0+ 中spread）、内细线（blur: 0+ 小spread） - 想让某层“在最底下”，就把它写在最前面；想“浮在最上面”，就写在最后
- 漏掉逗号会导致整条声明失效，CSS 解析器直接跳过
inset box-shadow 模拟内边框的注意事项
inset 阴影是从元素 content box 向内绘制的，它不占空间，也不影响布局流，但有两点关键限制：
-
inset阴影受overflow: hidden影响——如果父容器或自身设了该属性，阴影可能被裁掉 - 它不响应鼠标事件：
pointer-events: none是默认行为，无法像真实border那样参与热区判定 - 颜色保真度略低：深色背景上浅色
inset阴影可能显得发灰，需适当提高alpha值 - 正确写法：
box-shadow: inset 0 0 0 2px #333，四个参数缺一不可
box-shadow 和真实 border 共存时的尺寸干扰
当元素已有 border，再加 box-shadow，阴影起点是 border 的外边缘，不是 content box。这意味着：
-
border: 2px solid #000; box-shadow: 0 0 0 2px red→ 红边紧贴黑边，视觉总厚 4px，但红边实际从黑边外侧再扩 2px - 要制造间隙，必须加大
spread值，比如0 0 0 6px red（从黑边外扩 6px） - 调试时可用
outline: 1px dashed green标出元素真实外边界，确认阴影是否按预期延展 - Flex/Grid 容器中，
border可能触发最小尺寸计算，而box-shadow完全不影响子项排列
box-shadow 在高 DPR 屏或缩放下的像素对齐问题——它按 CSS 像素计算，但渲染时被插值，导致模糊变粗或边缘闪烁。这时候别调参数，先检查是否用了非整数 blur 或 spread。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
