border是唯一可靠且语义正确的细边框方案，因outline会漂移、box-shadow在高清屏易发虚，纯CSS需配合单位选择（如0.0625rem或0.5vmin）与背景控制，并用伪元素实现单侧或不规则描边。
border 是唯一可靠且语义正确的做法，outline 会漂移、box-shadow 在高清屏易发虚，纯 CSS 无法让“细”和“白色”在所有缩放/设备下稳定生效，必须配合单位选择与降级策略。
为什么不能用 img border="1" 或内联 border 属性
HTML5 已废弃 img 标签的 border 属性，浏览器虽可能兼容渲染，但校验失败、SEO 工具报错、无障碍审查不通过。内联样式如 style="border: 1px solid #fff" 虽能用，但无法复用、难维护、响应式时无法动态调整——比如用户系统缩放为 125% 时，1px 边框视觉上就变粗了，且白色在浅色背景里根本看不见。
border 的细边框写法：单位比数值更重要
要真正“细细的”，关键不在写 1px，而在选对单位：
-
0.0625rem（即 1px 基准下）：随根字号缩放，适配系统缩放，推荐用于字体主导的 UI -
0.5vmin：取视口短边的 0.5%，小图自动收窄，大图不糊，适合卡片类头像 - 避免
1px直接写死——Retina 屏会渲染为 2 物理像素，反而显粗；也别用0.1em，它依赖父元素字体大小，不稳定 - 白色边框必须搭配背景控制：
background: #fff或确保父容器非白色，否则会“消失”
单侧细白边或不规则描边只能靠伪元素
原生 border 不支持“只左+下”、“仅右上圆角+白边”这类组合。强行用 border-left: 1px solid #fff; border-bottom: 1px solid #fff 会破坏盒模型尺寸，且圆角无法分边生效。此时应：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
img外包一层div，设position: relative - 用
::before伪元素绝对定位，width/height精确控制描边区域 - 或改用
clip-path+border组合裁切，但 Safari 旧版兼容性差
高清屏下白色细边发灰？检查 color-scheme 和反锯齿
部分 macOS / iOS 浏览器开启深色模式后，#ffffff 可能被系统自动降为 #f5f5f7 以适配背景，导致“白边不白”。解决方法：
- 显式声明
color-scheme: light在 img 或其容器上 - 改用
rgb(255, 255, 255)或hsl(0, 0%, 100%)，绕过命名色映射 - 加
image-rendering: -webkit-optimize-contrast防止缩放时边框模糊
真正麻烦的是“细”这个需求本身——它天然和设备像素比、用户缩放、DPR 切换冲突。没有一劳永逸的写法，只有根据具体场景选单位、控背景、补降级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
