border-color 不支持单边多色或渐变，真要实现需用伪元素+background模拟，或 border-image（兼容性差），box-shadow 仅适合模糊装饰效果。
border-color 支持多值语法，但不是所有写法都生效
直接给 border-color 写四个颜色（比如 border-color: red green blue yellow）确实能生效，但它按顺时针顺序分别作用于上、右、下、左——这不是“多色边框”效果，而是四边独立设色。真想让一条边同时显示多种颜色（比如左边一半红、一半蓝），border-color 本身做不到。
- 浏览器不支持
border-color: linear-gradient(...)这类写法，会直接忽略 -
border是单层绘制，没有“边框内部渐变”或“分段着色”的 CSS 原生能力 - 想实现视觉上的“多色边框”，得绕开
border属性本身，用其他渲染层模拟
用伪元素 + background 实现可控多色边框
最稳定、兼容性好（IE11+）、且能精确控制每段颜色和长度的方式，是用 ::before 或 ::after 覆盖在元素边缘，再用 background 绘制色块或渐变。
- 把目标元素设为
position: relative，伪元素设position: absolute - 用
top / right / bottom / left和width / height控制伪元素位置和尺寸（例如：顶部边框 →top: 0; left: 0; width: 100%; height: 2px） -
background可用多个linear-gradient拼接，比如：background: linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%) - 注意 z-index，确保伪元素在内容之下、但覆盖在 border 区域之上
div {
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0; left: 0; width: 100%; height: 3px;
background: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 50%, #44b5f0 100%);
z-index: 1;
}
box-shadow 模拟多色外边框有局限
box-shadow 可以叠加多层，理论上能做出“彩色光晕”效果，但它是模糊扩散的，无法实现锐利分界或多段平直色带。
- 硬边效果只能靠极小的
blur-radius（如0 0 0 2px red），但此时多层阴影会互相遮盖，难以对齐 - 水平方向无法独立控制颜色分布，
box-shadow的每一层都是完整矩形 - 在高缩放或 subpixel 渲染下容易出现间隙或重叠，尤其在 retina 屏上更明显
- 适合做装饰性描边（比如霓虹感），不适合需要像素级对齐的 UI 边框
border-image 是正解，但兼容性和维护成本高
border-image 才是 CSS 原生支持多色/渐变边框的属性，但它依赖图片或渐变切片，实际使用比想象中麻烦。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
border-image-slice，哪怕只用渐变也要设1，否则不渲染 - 写法冗长：
border-image: linear-gradient(90deg, red, blue) 1，且旧版 Safari 需要-webkit-border-image - 当元素宽高变化时，
border-image默认拉伸填充，若要平铺或重复，得额外设border-image-repeat - 调试困难：浏览器 DevTools 对
border-image的可视化支持弱，颜色错位时很难定位是 slice 还是 gradient 起止点问题
真正需要动态切换多色边框时，别硬扛纯 CSS；用 JS 动态生成 border-image 的 data URL 或改伪元素 background 更可控。
