最简单可靠的方式是同时使用 border 和 outline：border 绘内侧实线边框，outline 绘外侧强调边框且不占布局空间；需用 outline-offset 留隙。

用 border + outline 实现双色边框

最简单可靠的方式是同时使用 border 和 outline 属性，它们分别绘制在元素盒模型的内侧和外侧，互不干扰，天然形成两层独立边框。

注意：outline 默认不占布局空间，且会绕过圆角（即 outline 不随 border-radius 弯曲），适合做外层强调边框。

• 给图片设置实线边框：border: 3px solid #4a90e2;
• 再叠加外描边：outline: 4px dashed #e74c3c;
• 为避免 outline 贴得太近，可加一点 outline-offset: 2px; 留出空隙

用嵌套容器实现真正分离的双色边框

如果需要两层边框之间有空白间隔、都带圆角、或各自支持不同样式（如一层虚线+一层波浪线），推荐用 HTML 嵌套结构：

• 外层 div 设第一层边框：border: 4px solid #9b59b6;
• 内层 div 或 img 设第二层边框：border: 3px solid #2ecc71;
• 两层之间用 padding 或 margin 控制间距（例如外层 padding: 6px）
• 两层都可自由加 border-radius，圆角效果完整自然

用 box-shadow 模拟第三层（甚至更多层）边框

box-shadow 支持多层投影，配合透明背景和精确偏移，能“画”出额外边框层，特别适合装饰性多层效果：

立即学习“前端免费学习笔记（深入）”；

• 基础边框：border: 2px solid #3498db;
• 第一层阴影边框：box-shadow: 0 0 0 4px #e67e22;
• 第二层阴影边框：box-shadow: 0 0 0 4px #e67e22, 0 0 0 8px #27ae60;
• 注意：所有 shadow 都需写在同一 box-shadow 声明中，用逗号分隔
• 这种方式不增加内容区域尺寸，但无法设置虚线/点线等 outline 或 border 支持的样式

用 border-image 实现多色拼接边框

如果“双重颜色”是指单条边框上左右/上下分段着色（比如左半红、右半蓝），border-image 是原生方案：

• 准备一个横向色带图（如 SVG 内联数据）或 CSS 渐变：linear-gradient(to right, #ff6b6b, #4ecdc4)
• 指定边框宽度：border: 12px solid transparent;
• 应用图像边框：border-image: linear-gradient(to right, #ff6b6b, #4ecdc4) 1;
• 关键：必须设 border-image-slice: 1;（或具体像素值）才能生效；若用 SVG，建议加 fill 关键字兼容圆角