能border-image 可配合 linear-gradient 实现边框渐变需同时设置 border、border-image-source、border-image-slice值为1和 border-image-repeat 四个属性缺一不可。border-image 能不能直接实现边框颜色渐变能但不是靠 border-color而是用 border-image 配合线性渐变背景。CSS 原生不支持 border-color: linear-gradient(...)强行这么写会被忽略——浏览器只接受纯色值。真正起作用的是 border-image 这套机制它把一张“图像”可以是渐变生成的贴到边框区域再通过 border-image-slice 控制如何切分和拉伸。border-image 实现渐变边框的最小必要配置四个属性缺一不可漏掉任意一个渐变边框大概率不显示或显示为纯色border必须显式声明宽度和样式如 border: 4px solid transparent否则 border-image 没地方渲染border-image-source用 linear-gradient 生成图像方向建议用 to right 或 to bottom避免斜向导致边框四边颜色错乱border-image-slice设为 1无单位表示不裁剪、完整使用渐变图设为 0 会失效设为 100% 在某些浏览器里行为异常border-image-repeat推荐 repeat 或 stretchround 可能因尺寸凑不整导致色块断裂示例立即学习“前端免费学习笔记深入”div { border: 3px solid transparent; border-image: linear-gradient(90deg, #ff6b6b, #4ecdc4) 1; border-image-repeat: stretch;}为什么边框渐变在圆角border-radius下会出问题border-image 和 border-radius 天然不兼容渐变图是按矩形边框绘制的圆角区域不会自动裁切或过渡结果是边框直角部分有渐变圆角处常出现硬边、色块偏移甚至空白。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。