怎么用 background-image 实现渐变边框效果
纯 CSS 没有 border-gradient 这种属性，但可以用背景图 + padding + background-clip 模拟出视觉上“带渐变边框”的容器。核心思路是：把渐变画在容器背景上，再用 background-clip: padding-box 把背景裁剪到内边距边缘，留出透明 border 区域——这样渐变就只出现在 padding 区域，看起来像边框。
常见错误是直接给 border 设渐变（无效），或忘了设 background-clip，导致渐变铺满整个元素（包括内容区），失去边框感。
-
border必须设为透明或transparent，否则会盖住背景渐变 -
padding值就是你想要的“边框粗细”，比如padding: 2px对应 2px 宽的渐变边框 -
background-clip: padding-box是关键，不加它，渐变会延伸到 content 区 - 渐变方向要和容器尺寸匹配，横向渐变在窄屏下可能被截断，建议用
to right或to bottom而非具体角度
响应式下怎么保证渐变边框不拉伸变形
用 background-size 控制渐变重复或缩放时，容易在缩放容器时让渐变条纹变宽/变窄，尤其在移动端横竖屏切换时。真正稳定的方案是用 background-size 配合 background-repeat: no-repeat，并把渐变尺寸锚定在物理像素单位（如 100% 2px）而非百分比。
例如：想保持 2px 高的水平渐变边框，不管容器多宽，都让它“刚好铺满上下边”，就得避免写 background-size: 100% 100%（这会让渐变随容器拉伸）。
立即学习“前端免费学习笔记（深入）”；
- 水平边框（上+下）：用
background: linear-gradient(to right, #ff6b6b, #4ecdc4); background-size: 100% 2px; background-repeat: repeat-x; - 垂直边框（左+右）：用
background: linear-gradient(to bottom, #ff6b6b, #4ecdc4); background-size: 2px 100%; background-repeat: repeat-y; - 四边都有：推荐用两个伪元素
::before和::after分别画上下、左右渐变，避免background层叠冲突
为什么 box-shadow 不能替代渐变边框
box-shadow 支持单侧阴影、模糊、颜色过渡，但无法实现锐利的线性渐变边框——因为它的渐变是高斯模糊式的，边缘发虚，且不支持方向控制（比如从左到右的色停）。一旦加了 blur-radius，就不再是“边框”，而成了光晕；不加 blur 又只能单色。
更实际的问题是：响应式场景下，box-shadow 的 spread-radius 是固定像素值，缩放容器时不会等比变化，容易在小屏上消失、大屏上过粗。
- 想模拟 2px 渐变边框？
box-shadow: 0 0 0 2px linear-gradient(...)是无效语法，浏览器直接忽略 -
outline同样不支持渐变，且无法定位到单侧 - 唯一能 hack 的是
border-image，但它兼容性差（Safari 旧版不支持border-image-slice: 1），且设置复杂，响应式适配成本高
移动端 Safari 下渐变边框闪动或失效怎么办
iOS 15+ 之前，Safari 对 background-clip: padding-box 在 flex 或 transform 容器中渲染不稳定，尤其配合 will-change 或滚动时，渐变边框可能突然消失或错位。这不是代码写错，而是渲染管线的已知缺陷。
绕过方式不是改渐变写法，而是换容器层级结构：把渐变边框逻辑移到父容器，子容器只负责内容；或者用 position: relative + 伪元素绝对定位画边框，避开 background-clip。
- 禁用
transform: translateZ(0)或will-change: transform，它们会触发 Safari 的独立图层，加剧裁剪异常 - 测试时务必真机连 Safari Web Inspector，模拟器里看不到真实渲染问题
- 如果必须用
background-clip，加一句-webkit-background-clip: padding-box;兼容老 Safari
background-size 是否写了固定像素，比重写整个方案更快。 
