最简单可靠的方式是同时使用 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关键字兼容圆角
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
