纯border仅支持单层样式，实现双色、斜切等复杂边框需借助box-shadow（轻量多层、需注意inset与圆角匹配）、伪元素+渐变（精细可控）或border-image（原生图案化）等盒模型替代方案。
纯 border 只能画一层实线、虚线或双线，想实现内外双色、斜切、渐变、镂空圆角等效果，必须跳出 border 本身，用盒模型其他部分“借位”实现。
用 box-shadow 模拟多重边框：最轻量且可控
它不占布局空间、支持多层叠加、能用 CSS 变量统一控制，比硬套 border + outline 更可靠。
-
box-shadow写法顺序决定图层叠放：靠前的阴影在视觉上更靠近元素；要让外层“盖住”内层，外层阴影得写在后面 - 内边框必须用
inset：比如box-shadow: inset 0 0 0 2px #666；外边框用普通写法：box-shadow: 0 0 0 4px #e74c3c, 0 0 0 8px #4ecdc4 - 有
border-radius时，box-shadow默认不跟随弯曲；需确保扩散值（如4px）≤ 圆角值（如border-radius: 6px），否则边缘会露直角 - CSS 变量命名要直白：用
--border-inner-width而不是--bd-w1，避免后期回溯困难 - 旧版 Safari 不支持
calc()在变量中参与计算（如calc(var(--w) * 2)），宽度类数值建议提前算好再定义
用伪元素 + linear-gradient 实现双色/渐变边框
这是目前兼容性好、控制精细的主流方案，尤其适合上下/左右不同色、角度可控的边框，但必须处理定位和圆角细节。
- 容器必须设
position: relative，否则伪元素无法精确定位 - 每个方向边框需独立伪元素控制：顶边用
&::before+background-position: top，底边用&::after+background-position: bottom - 伪元素也要加
border-radius，否则圆角处会漏出底色 - 渐变角度必须匹配实际视觉方向：比如用
transform: skewX(-12deg)做左斜边，则背景渐变角度应为102deg（即90deg + 12deg），不能用to top right这类模糊关键字 - 如果进度条需要动态更新，别改
width，改background-size和background-position，否则斜边位置会漂移
用 border-image 实现图案化/分段边框
它是唯一原生支持“边框专属渲染逻辑”的属性，缩放、重复、裁切都内置，但容易因配置缺失而完全失效。
立即学习“前端免费学习笔记（深入）”；
-
border-width必须显式设置（哪怕1px），否则border-image不渲染 -
border-style不能是none或hidden，推荐固定用solid - 图源优先选 SVG 或 CSS 渐变：
border-image: linear-gradient(...)是合法且可缩放的 - 数字参数（如
12）代表切割区域比例，不是像素值；四色边框示例中末尾的12表示按 12px 切割九宫格 - 不要试图用
background多层模拟边框——background-clip和background-origin配合稍有偏差就会漏边或错位
用 mask 或 radial-gradient 实现内凹圆角/镂空边框
这类效果本质是“遮罩”，不是描边，所以必须从背景层入手，且对父容器和自身尺寸敏感。
- 内凹圆角按钮靠四个
radial-gradient分别覆盖四角，background-position必须精确对应：right bottom、left top等 - 若背景是渐变色，
mask比background更稳妥：用同样结构的径向渐变做遮罩层，避免颜色叠加干扰 -
mask在 Safari 15.4 之前不支持百分比坐标，需 fallback 到固定像素值 - 所有遮罩方案都依赖
background-clip: border-box，否则内容区可能意外裁切 - 响应式下，
background-size若用百分比（如70% 70%），需测试不同宽高比下的四角对齐是否稳定
真正难的不是写出某一种效果，而是当设计稿同时要求「斜切 + 渐变 + 圆角 + 响应式缩放」时，哪一层该用 box-shadow、哪一层该交给伪元素、哪一部分必须用 mask 遮罩——这取决于你能否一眼判断出哪个属性在盒模型里“不占空间但能绘制”，以及哪个属性“会随尺寸自动适配”。
