实现图片多层颜色边框有三种可靠方案：一是用 border-image 贴 SVG 色带实现分段配色；二是用 box-shadow 叠加多层外边框，兼容性好；三是用伪元素定位模拟真正多层边框，灵活性最强。
给图片加漂亮的多层颜色边框，核心不是靠多个 border 叠加（CSS 不允许同一方向设多层 border），而是用现代 CSS 提供的几种可靠方案：用 border-image 贴色带图、用 box-shadow 模拟外层边框、或用伪元素 + 定位实现真正多层。下面分三种实用方式说明：
用 border-image 实现多色拼接边框
这是最接近“原生多色边框”的方法，适合水平/垂直方向分段配色（如左红、中绿、右蓝）：
- 准备一个横向色带 SVG（内联更稳，免请求），例如三段等宽：
<img src="xxx.jpg" style="border: 10px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10'%3E%3Crect width='40' height='10' fill='%23ff6b6b'/%3E%3Crect x='40' width='40' height='10' fill='%234ecdc4'/%3E%3Crect x='80' width='40' height='10' fill='%23ffe66d'/%3E%3C/svg%3E") 10 fill;"> - 必须显式写
border-width（如10px），否则不生效 -
border-image-slice: 10表示按 10px 高度切图；若图高正好是 10px，也可写100% - 支持圆角：加
border-radius同时生效，但需确保 SVG 中有fill关键字（上面示例已含）
用 box-shadow 叠加多层外边框
简单、兼容性好（IE10+），适合加 2–3 层不同颜色的“发光式”边框，不占布局空间：
- 基础写法（两层）：
style="border: 2px solid #3498db; box-shadow: 0 0 0 4px #e74c3c, 0 0 0 8px #9b59b6;" - 每层用
0 0 0 [宽度] [颜色]控制，数字越大离图片越远 - 可混合虚实：把其中一层换成
inset做内边框效果，例如inset 0 0 0 2px #2ecc71 - 注意：box-shadow 是投影，不能做“贴边多色线”，但视觉上足够丰富
用伪元素模拟真正多层边框
最灵活，可控制每一层的位置、颜色、圆角、甚至动画，适合高级定制：
立即学习“前端免费学习笔记（深入）”；
- 给图片容器加
position: relative，再用::before和::after绘制额外边框层 - 示例（双层边框）：
<div class="pic-wrap"><img src="xxx.jpg"></div>
在 CSS 中：
.pic-wrap { position: relative; display: inline-block; }
.pic-wrap::before { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 4px solid #e67e22; }
.pic-wrap::after { content: ""; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border: 2px dashed #3498db; } - 三层？再加一个
::before或用 JS 动态切换类名控制层数 - 缺点：需额外包裹一层 div，且 IE8 及以下不支持伪元素
不复杂但容易忽略：所有方案都依赖图片本身有明确尺寸（比如设了 width 或被父容器约束），否则边框可能塌陷或错位。
