伪元素实现渐变边框必须用mask或clip-path裁剪出边框区域：mask需双渐变叠加+exclude排除内容区，clip-path则用inset()反向裁剪外圈；background-clip等方案因不控制背景尺寸而失效。
伪元素实现渐变边框为什么总不生效
因为 ::before 或 ::after 默认无法继承父元素的 border，更不能直接给边框加渐变——CSS 的 border-image 虽支持渐变，但兼容性和控制粒度差；多数人误以为“套个伪元素 + background: linear-gradient() 就完事”，结果发现伪元素盖不住内容、边框位置偏移、圆角对不上。
真正可行的路径只有一条：用伪元素铺一层和容器等大的渐变背景，再靠 clip-path 或 mask 只露出边框区域。但注意：clip-path 在 Safari 旧版本里对 inset() 支持不稳定，mask 则需额外定义 SVG 或使用 mask-border（目前仅 Chrome 111+ 支持）。
- 优先用
mask+linear-gradient裁剪：兼容性好、缩放无锯齿 - 避免用
box-shadow模拟——多层阴影性能差，且无法做斜角或虚线渐变 - 伪元素的
z-index必须低于主内容，否则文字被遮住；同时要设pointer-events: none，不然会拦截点击
mask 边框裁剪的具体写法与参数陷阱
mask 不是直接画边框，而是用一张“蒙版图”决定哪些像素显示。常见错误是把 mask-image 设成实心矩形渐变，结果整个元素变透明——其实你需要的是“中间挖空”的蒙版：一圈有灰度值（显示），中间全黑（隐藏）。
最简可靠写法是用两个同心 linear-gradient 叠加出边框区域：
立即学习“前端免费学习笔记（深入）”；
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) padding-box; mask-composite: exclude;
但这只能做纯色边框。要做渐变边框，得换成：
mask: linear-gradient(45deg, #000 0%, transparent 50%, #000 100%) content-box, linear-gradient(#000 0 0) padding-box; mask-composite: exclude;
-
content-box控制内容区（挖空），padding-box控制内边距区（留边），两者叠加后只剩 border 区域可见 -
mask-composite: exclude是关键，表示“取两图非交集”；Chrome 111+ 才支持，旧版需 fallback 到-webkit-mask+ SVG - 渐变角度写死在
mask-image里，无法响应旋转动画；如需动态旋转，得用@property配合mask-position
clip-path 实现渐变边框的兼容性妥协方案
当目标环境必须支持 Safari 14–15 或 Firefox 90–100 时，mask 不可用，只能退到 clip-path。但它不能“裁出边框”，只能“裁出内容”，所以思路反转：让伪元素比父容器大一圈，再用 inset() 把中间裁掉，只留外圈。
例如给一个 200px × 200px 元素加 4px 渐变边框：
.box::before {
content: '';
position: absolute;
inset: -4px;
background: linear-gradient(45deg, red, blue);
clip-path: inset(4px round 8px); /* 上右下左各切掉4px，圆角8px */
}-
inset(4px)表示从四边向内收缩 4px，中间区域被裁掉，剩下就是边框带 - 圆角必须写两次：父元素的
border-radius和clip-path: round值要一致，否则边框角对不上 - IE 完全不支持
clip-path，Android UC 浏览器对inset()解析异常，需加@supports (clip-path: inset(0))条件加载
background-clip + background-origin 组合为何行不通
有人试过 background: linear-gradient() / 2px 2px 配 background-clip: border-box，结果发现渐变纹路被拉伸、边框粗细随容器变化、圆角处断裂——这是因为 background-clip 只控制“背景画在哪”，不控制“画多大”。渐变背景默认平铺，而边框区域太窄，根本撑不满一次平铺单元。
-
background-origin: border-box会让渐变起点锚定在边框外沿，但边框本身没尺寸，实际渲染仍以padding-box为基准 - 即使强行用
background-size: 200% 200%拉伸，也无法精准对齐四边，尤其在border-width不为整数时出现 1px 错位 - 这个方案唯一能用的场景是：固定宽高 + 四边等宽 + 无圆角 + 仅需水平/垂直单向渐变
真正稳定的渐变边框，永远绕不开遮罩或裁剪——不是语法不够强，而是 CSS 边框模型天生不承载渐变语义。别在 border-image 的参数里反复调 slice 和 repeat，那是在对抗规范设计前提。
