不能只用一个伪元素做双层渐变边框，因为单个::before或::after仅支持一层背景/遮罩，无法独立控制内外两圈渐变；必须用::before（外圈宽边框）和::after（内圈细边框）分工实现。
为什么不能只用一个伪元素做双层渐变边框
单个 ::before 或 ::after 只能渲染一层背景或遮罩，而“双层”指的是视觉上可区分的内外两圈渐变边框（比如外圈是品牌主色渐变，内圈是中性高光渐变），不是简单叠加两个相同效果。强行在一个伪元素里塞两层渐变会互相干扰，background 不支持多层独立控制，mask 也难同时定义两个边缘区域。
::before + ::after 分工：外圈渐变 vs 内圈高光
标准做法是让 ::before 负责外层宽边框（如 3px），::after 负责内层细边框（如 1px），两者都用 linear-gradient 或 conic-gradient，但参数错开：
-
::before：设inset: -3px（向外撑出），padding: 3px，背景用大角度线性渐变（如160deg），色标透明度整体偏低（rgba(255,255,255,0.2)→rgba(145,48,252,0.35)→rgba(255,255,255,0.1)） -
::after：设inset: -1px，padding: 1px，背景用小角度（135deg）+ 更高对比度的中性渐变（white→rgba(255,255,255,0.05)），模拟受光边缘 - 两者都加
border-radius: inherit和pointer-events: none，避免圆角断裂和交互阻断
必须加 overflow: hidden 和 position: relative
这两个声明不是可选优化，而是功能前提：
- 父容器漏掉
position: relative→ 两个伪元素会相对于body定位，完全错位 - 漏掉
overflow: hidden→ 伪元素的inset: -3px会导致内容区溢出，尤其在圆角场景下边缘毛刺明显 - 若父元素有
padding，inset: 0会让伪元素覆盖 padding 区；此时应改用top: 0; left: 0; width: 100%; height: 100%并手动减去 padding 值
动画时最容易崩的三个点
给双层边框加 hover 动画时，90% 的失败集中在：
- 只在父元素写
transition: background 0.3s→ 实际要写在::before和::after各自的选择器里 - 用
transform: scale()同时动两层 → 外圈缩放会盖住内圈，建议只动内层（::after），外层保持静态以维持结构感 - 渐变角度动画用
background-position→ 对线性渐变有效，但对conic-gradient必须用animation: rotate，且需配合transform: translate(-50%, -50%)居中，否则旋转中心偏移
双层渐变边框真正的复杂点不在写法，而在两层渐变的色标节奏和透明度梯度必须错开——外层要“淡而稳”，内层要“亮而短”，否则看起来像糊了一层脏玻璃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
