用 border: 3px double #000 可实现黑色双线边框，最小宽度为3px，不支持圆角；推荐用 class 抽离样式，需圆角时可用 box-shadow 模拟。

直接用 CSS 的 border 属性，写成 double 样式就能实现黑色双线边框，不需要额外嵌套或复杂代码。

一行代码搞定（内联样式）

在 <img> 标签里加 style 属性：

<img src="photo.jpg" alt="示例图" style="border: 3px double #000;">

• 3px 是双线整体宽度（不是单条线粗细），可调为 2px、4px 等
• double 是关键值，浏览器自动渲染为两条平行实线+中间空白
• #000 或 black 都表示纯黑；也支持 rgb(0,0,0) 等写法

更规范的写法（推荐用 class）

把样式抽离到 <style> 或外部 CSS 文件中，方便复用：

<img src="photo.jpg" alt="示例图" class="double-black">

然后定义：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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

<style>
.double-black { border: 3px double black; }
</style>

注意几个实用细节

• 双线边框的「最小可用宽度」是 3px —— 设成 1px 或 2px 时多数浏览器会退化为单线
• 它默认按 content-box 盒模型计算，边框会增加图片总尺寸；如需保持原宽高不变，加 box-sizing: border-box
• 不支持圆角（border-radius 对 double 无效）；若要圆角双线效果，得用 box-shadow 模拟
• 不能只设某一边为 double（比如 border-top: double 合法，但左右/上下必须配对才视觉协调）

替代方案：用 box-shadow 模拟双线（带圆角）

如果既要双线感，又要圆角，可用阴影伪造外层线：

.double-round {
  border: 2px solid black;
  border-radius: 8px;
  box-shadow: 0 0 0 2px black;
}

这样得到的是「实心黑边 + 外圈描边」，视觉接近双线，且支持圆角和响应式缩放。