box-shadow无法实现真正内层边框因其阴影总绘制在元素背景和边框之上，无法穿透到内容层下方；多层外边框可用多个box-shadow值叠加，嵌套式内外多层须用伪元素或额外包裹层。
box-shadow 实现多层边框时为什么内层阴影总被遮住
因为 box-shadow 默认是「向外投影」，即使设了负值偏移，也仍受元素绘制顺序限制：阴影永远画在元素背景和边框之上，但无法穿透到内容层下方——所以你加的第二层「内阴影」其实根本没生效，只是视觉上误以为该有。
实操建议：
- 用多个
box-shadow值叠加可模拟多层外边框，例如：box-shadow: 0 0 0 2px #f00, 0 0 0 4px #00f, 0 0 0 6px #0f0; - 要实现真正「嵌套式」内外多层（比如内边框+外边框），必须放弃纯
box-shadow，改用伪元素或额外包裹层 - 注意
box-shadow的扩散半径（第四个参数）为 0 时，等效于描边；大于 0 会模糊，小于 0 不合法
outline 为什么不能当多层边框用
outline 不占布局空间、不支持圆角、无法单独控制某一边，最关键的是：它只允许一层。CSS 规范明确禁止 outline 多值叠加，写多个 outline 声明只会以最后一条为准。
常见错误现象：
- 写了
outline: 2px solid red; outline: 4px dashed blue;，实际只渲染蓝色虚线 - 想用
outline-offset拉出第二层，结果发现 offset 是整体偏移，不是分层控制 - 在 focus 状态下叠加 outline 和 border，容易因 box-sizing 或重绘导致闪烁或错位
用伪元素实现可控的双层边框（兼容性好且无坑）
这是目前最稳妥的「真多层」方案：用 ::before 和 ::after 各画一层，定位精准、可分别设置圆角/颜色/动画，且完全不影响原元素盒模型。
使用场景：需要 hover 时外层动、内层不动；或某一层需透明/渐变/图案纹理。
实操要点：
- 父元素设
position: relative;，伪元素用position: absolute;+inset: 0; - 内层伪元素用
z-index: -1;，外层用z-index: -2;，确保层级分明 - 两层都设
border-radius，但外层 radius 要比内层大 1–2px 才显「嵌套感」 - 避免在
transform元素上直接套伪元素边框，可能触发硬件加速导致边缘锯齿
div {
position: relative;
}
div::before {
content: '';
position: absolute;
inset: 0;
border: 2px solid #333;
border-radius: 4px;
z-index: -1;
}
div::after {
content: '';
position: absolute;
inset: -2px;
border: 2px solid #999;
border-radius: 6px;
z-index: -2;
}
border-image 配合 SVG 实现任意层数与纹理
当层数超过三层，或需要斜线、点线、渐变过渡等复杂样式时，border-image 是唯一能「单属性控多层」的原生方案，但门槛略高。
关键限制：
-
border-image-source必须是图片或 SVG data URL，不能是 CSS 渐变（除非用border-image-slice: 1强制拉伸） - SVG 中每条边需按
border-image-slice划分区域，9 宫格里中间那块会被舍弃，只取四边+四角 - 旧版 Safari 对
border-image-outset支持差，多层外扩慎用 - 调试困难：浏览器开发者工具不显示 border-image 的实时切片预览，得靠反复导出 SVG 修改
多层边框看着简单，真正卡住人的往往是「哪一层该响应事件」「缩放时是否等比」「高对比度模式下是否还可见」——这些细节不会报错，但上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
