纯CSS实现彩色边框卡片只能用border-image或伪元素，因border属性仅支持颜色值不支持linear-gradient()；border-image需设透明边框+slice+渐变，伪元素方案适合动画且兼容性更稳。
纯 CSS 就能做出彩色边框卡片，不需要图片、不依赖 JS，但直接用 border 写渐变会失败——必须绕过原生边框限制，用伪元素或 border-image 实现。
为什么不能直接写 border: linear-gradient(...)
CSS 的 border 属性只接受颜色值（red、rgba()、#fff），不支持 linear-gradient() 函数。你写 border: 2px solid linear-gradient(...)，浏览器会整个忽略这条声明，退回到无边框或继承的默认样式。
- 错误现象：
border消失、控制台无报错、开发者工具里该属性被划掉 - 根本原因：CSS 规范中
border-color类型是linear-gradient()返回的是 - 替代路径只有两条：
border-image或伪元素模拟边框
用 border-image 实现彩虹边框（推荐）
这是最简洁、语义正确、且兼容性足够好的方案（Chrome/Firefox/Safari/Edge 均支持，Safari 需加 -webkit-border-image 前缀）。
- 必须先设
border-width（比如border: 6px solid transparent），否则border-image无处附着 -
border-image-slice: 1表示不切割渐变图，让它完整铺满边框区域 - 简写格式为：
border-image: linear-gradient(45deg, red, orange, yellow) 1 / 6px / repeat; - 圆角兼容：搭配
border-radius时，Safari 可能出现锯齿，加overflow: hidden可缓解
div.card {
border: 6px solid transparent;
border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #6a11cb) 1;
border-radius: 12px;
-webkit-border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4, #6a11cb) 1;
}
用伪元素 ::before 模拟动态渐变边框
适合需要动画（如旋转流动）、或要避开 border-image 在某些旧安卓 WebView 中渲染异常的场景。
- 父容器需设
position: relative，伪元素设position: absolute+z-index: -1 - 伪元素尺寸要比父容器略大（如
width: 104%,height: 102%），再靠top/left微调露出边框区域 - 动画关键：用
@property --angle控制linear-gradient(var(--angle), ...)，再配@keyframes驱动旋转 - 注意：iOS Safari 对
background-attachment: fixed敏感，但这里用的是transform+background-position动画，更稳
移动端和 Safari 的几个硬坑
真机调试前务必确认这几点，否则在 iPhone 上大概率白屏、闪烁或边框错位：
-
background-attachment: fixed在 iOS WebKit 是已知渲染缺陷区，伪元素方案里绝对不要加 -
transparent作为渐变色时，Safari 5.1–6.0 会失效，换成rgba(0,0,0,0) - 角度单位漏
deg（如写45而非45deg）会导致整条linear-gradient被丢弃 - HSL 插值默认走 RGB，红→蓝中间会发灰；要鲜艳过渡，得手动写
hsl(0, 100%, 50%) → hsl(240, 100%, 50%)，且s和l后必须带%
最易被忽略的其实是 fallback：所有 linear-gradient 声明都该配一个降级的 background-color 或 border-color，否则解析失败时卡片就“裸奔”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
