最可靠方案是用 border: 2px solid #666;，需确保三值齐全、display 类型适配、box-sizing 正确，并避免用 outline 或 box-shadow 模拟。

直接用 border 属性加深灰色实线边框最可靠，border: 2px solid #666; 就够了；别用已废弃的 border HTML 属性，也别指望 outline 或 box-shadow 模拟出真正可控的实线。

用 border 写深灰色实线边框（推荐）

这是唯一语义正确、兼容性好、能精准控制粗细/颜色/样式的方案。深灰色常用 #666、#555 或 rgb(102, 102, 102)，实线必须带 solid 关键字。

• border: 2px solid #666; —— 最简写法，三值缺一不可：宽度、样式、颜色
• 若图片是 inline 元素（默认），上下边框可能被行高“吞掉”，建议加 display: block; 或 display: inline-block;
• 边框会增加元素总尺寸（盒模型为 content-box），如需保持原图宽高不变，得额外加 box-sizing: border-box;
• 示例：

border 不生效？先查这三处

深灰色边框“看不见”，通常不是颜色问题，而是 CSS 没真正应用上。

• 检查是否写了完整三元组：只写 border: 2px #666; 缺 solid，浏览器直接忽略整条声明
• 确认没有其他更高优先级规则覆盖，比如外部 CSS 里写了 img { border: none; } 或重置库注入了 border: 0;
• 打开开发者工具（F12），选中图片，在 Computed 面板看最终生效的 border 值，点右侧箭头溯源
• 表单类图片（如 ）可能受系统主题干扰，需加 appearance: none; 并重置全部 border 相关属性

需要圆角+深灰边框？border-radius 必须配 border

单独加 border-radius 不会出圆角边框，它只是“裁切”边框拐角。必须和 border 同时存在才有效。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 顺序无关，但建议写在一起：border: 2px solid #666; border-radius: 6px;
• 如果图片用了 object-fit: cover;，且 border-radius 值较大，圆角可能被裁掉——此时要确保图片容器有足够内边距或改用包裹层
• 老版 Safari 对 inline 图片的 border-radius 支持异常，显式设 display: block; 可规避
• 不支持“单边圆角”，比如只要左上+右下圆角，只能靠伪元素或额外
  包裹实现

  别碰 outline 和 box-shadow 模拟边框

  它们看起来像边框，但行为完全不同，用在正式页面里容易翻车。

  • outline 不参与布局计算，无法设置单边，不支持 border-radius，且高对比度模式下颜色会被系统强制替换
  • box-shadow: 0 0 0 2px #666; 是绘制在元素上方的图层，可能遮挡文字、背景渐变，打印时经常不出现，缩放后像素模糊
  • 调试时临时高亮可用，但交付代码里必须用 border —— 这是唯一能保证颜色、粗细、圆角、响应式缩放都稳定的方案

  深灰色实线边框看着简单，但真正落地时，display 类型、盒模型、层叠权重、设备像素比（比如 Retina 屏上 1px 发虚）这些细节最容易被跳过。尤其是粘贴进 Word 或导出 PDF 时，CSS 边框根本不会带过去——那得走 Word 原生图片格式设置，跟 HTML 完全是两套逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！