双重复边框可用三种纯css方案：1. border+outline（最简，但无圆角）；2. 多层box-shadow（支持圆角与渐变）；3. 嵌套容器（最灵活可控，适合复杂交互与响应式）。
直接用 border 只能加一层边框，要实现「双重复边框」效果，必须组合 outline 或嵌套元素，纯 CSS 就能搞定，无需 JS 或切图。
用 border + outline 实现最简双框
这是最快捷的方式，适合静态图片、不需要圆角对齐的场景。注意 outline 默认不占布局空间，且不能设圆角（outline-radius 未被主流浏览器支持）。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
border设内层边框（比如2px solid #333） -
outline设外层边框（比如3px dashed #ff6b6b），用outline-offset控制间距（负值向内缩，正值向外推） - 务必加
display: inline-block或block，否则outline在部分浏览器中可能不渲染
img {
border: 2px solid #333;
outline: 3px dashed #ff6b6b;
outline-offset: 4px;
display: inline-block;
}
用 box-shadow 模拟双实线边框（支持圆角）
当需要内外边框都带圆角，或想控制虚线/渐变等复杂样式时，box-shadow 更可靠。它本质是投影，但多层阴影可叠出「框中框」感。
- 第一层
box-shadow是紧贴图片的内边框（0 0 0 2px #000） - 第二层加偏移和宽度，形成外框（
0 0 0 6px #ccc，其中 6px 是总宽度，减去内框 2px，实际间隙为 4px） - 两层都设
inset可做内凹双框；都不设则为外凸 - 兼容性好，所有现代浏览器都支持，且响应式下不会塌陷
img {
box-shadow:
0 0 0 2px #000,
0 0 0 6px #ccc;
border-radius: 8px; /* 圆角会同时作用于两层阴影 */
}
用包裹容器实现完全可控的双框（推荐用于复杂布局）
当图片需响应式缩放、配合 flex/grid 排版，或要分别控制内外框的鼠标悬停、动画、点击区域时，用额外 <div> 包裹最稳妥。<ul>
<li>外层 <code>div 设第一层边框和 padding（即框间空白）
img 设第二层边框，并用 max-width: 100% 保证不溢出margin 代替 padding，否则外框尺寸计算易出错background: transparent，防止默认白底遮挡<div class="double-border">
@@##@@
</div>
<p>.double-border {
border: 3px solid #4a90e2;
padding: 4px;
display: inline-block;
}
.double-border img {
border: 2px solid #f5f5f5;
display: block;
max-width: 100%;
}</p>
真正容易被忽略的是：双框在高缩放比例（如 Windows 125% 缩放）或 Retina 屏下，outline 容易发虚，box-shadow 的像素对齐更稳；而容器方案虽然多写一行 HTML，却让后续维护、适配暗色模式、添加过渡动画都更清晰。选哪种，取决于你接下来要不要动这个边框。
