伪元素方案是实现渐变边框且兼容 border-radius 的可靠方法：主元素 relative 定位，伪元素 absolute + inset 撑出边框区域，并同步 border-radius；Less 中需显式声明伪元素样式，避免嵌套陷阱，高 DPR 下加 transform: translateZ(0) 防模糊。
伪元素实现渐变边框时 border-radius 不生效？
Less 本身不提供原生渐变边框语法，直接写 border: linear-gradient(...) 会失效——CSS 规范里 border 不接受渐变值。常见错误是试图绕过这点，比如给 border 设颜色再叠 background，结果圆角边缘出现锯齿或渐变溢出。
真正可行的路径只有两条：用 ::before/::after 伪元素模拟边框，或用 background + background-clip 裁切。前者更可控，尤其对圆角容器。
实操建议：
- 主元素设
position: relative，保证伪元素能精确定位 - 伪元素用
absolute铺满主容器，再用inset: -2px（假设边框宽 2px）向外撑出边框区域 - 伪元素的
border-radius必须和主容器一致，否则圆角错位 - 主容器自身
background设为纯色或透明，避免遮盖伪元素的渐变
Less 中用 &:before 写渐变边框要避开哪些嵌套陷阱？
Less 的嵌套语法容易让人误以为 &:before 会自动继承父级所有样式，但 border-radius、transform 等属性不会透传。更关键的是，如果主选择器带媒体查询或条件混合（.mixin when (@debug = true)），&:before 块可能被意外忽略或编译错位。
常见错误现象：
- 编译后伪元素没生成 CSS 规则（漏了
&或缩进不对） - 渐变方向在不同设备上翻转（
linear-gradient(45deg, ...)没加to right bottom明确终点） - 伪元素 z-index 被其他层覆盖，边框“看不见”
实操建议：
- 显式写
&:before { content: ""; position: absolute; z-index: -1; }，不依赖隐式继承 - 渐变用标准语法：
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);，避免旧版角度写法兼容问题 - 在 Less 变量中统一定义边框宽度（如
@border-width: 3px;），伪元素的inset和border-radius都引用它
background-clip: padding-box 能否替代伪元素？
可以，但有硬限制：它只裁切背景到内边距框（padding-box），而渐变必须作为 background-image 存在；若容器有 padding，边框区域实际是透明的，无法呈现渐变“边框感”。更麻烦的是，border-radius 对 background-clip 的裁切边界影响不稳定——Chrome 和 Safari 渲染略有差异，圆角处易露底色。
使用场景有限：
立即学习“前端免费学习笔记（深入）”；
- 仅适用于无 padding、且允许边框“视觉上略向内收缩”的简单卡片
- 必须配合
background-origin: border-box和多层 background（一层渐变 + 一层纯色遮罩）才能模拟厚度 - Less 中写起来反而更冗长：
background: linear-gradient(...), linear-gradient(#fff, #fff); background-clip: padding-box, border-box;
结论：伪元素方案在 Less 项目中更可靠，代码可读性高，调试直观。
Less 编译后圆角渐变边框在 iOS 上发虚？
这不是 Less 的问题，而是 WebKit 渲染层面对 transform: scale() 或子像素定位的敏感。当伪元素用 inset: -2px 撑开时，在非整数 DPR（如 iPhone XR 的 2.0x）下，边缘可能落在半像素位置，触发抗锯齿模糊。
解决方法很具体：
- 给伪元素加
transform: translateZ(0)强制硬件加速，避免 subpixel 模糊 - 或者改用
outline+outline-offset模拟（但 outline 不支持渐变，只能退化为单色） - 更稳妥的是：在 Less 中为高 DPR 设备加媒体查询，把边框宽度从
2px改成2.5px或3px，避开半像素线
