Retina屏上details边框变粗是因为1px CSS像素被渲染为2物理像素，导致加粗模糊；最稳妥方案是用伪元素+scaleY(0.5)模拟1物理像素边框。
details标签的边框为什么在Retina屏上变粗？
因为details默认用border（比如border-bottom: 1px solid #ccc），而浏览器在DPR=2设备上会把这1个CSS像素渲染为2个物理像素——视觉上就是“加粗+轻微模糊”。这不是details特有，所有固定px边框都这样，但details常用于列表项、折叠面板，边框变粗后特别扎眼。
别直接写0.5px或媒体查询降边框宽度
虽然部分iOS Safari支持border-bottom: 0.5px，但安卓WebView、旧版Chrome、微信内置浏览器大多忽略或渲染为0（边框消失）。用@media (-webkit-min-device-pixel-ratio: 2)全局降border-width也危险：
- 它会影响所有元素，包括按钮、输入框，可能破坏UI一致性
- 无法区分“需要高清边框”的
details和“必须保持1px视觉重量”的操作控件 - 不响应DPR动态变化（比如插拔外接4K显示器时）
用伪元素+scaleY模拟1物理像素边框
这是最稳妥的方案，对details尤其合适——它通常只有一条下边框，且结构简单。关键点：
- 给
details加position: relative，移除原border-bottom - 用
::after画一条height: 1px的色块，bottom: 0定位 -
transform: scaleY(0.5)，再设transform-origin: bottom防偏移 - 确保父容器没
overflow: hidden，否则伪元素被裁掉
示例CSS：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
details {
position: relative;
border-bottom: none;
}
details::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ccc;
transform: scaleY(0.5);
transform-origin: bottom;
}
如果用了summary自定义样式，要同步处理
details > summary常被重置样式（比如去掉默认箭头、加padding），此时伪元素边框可能错位：
- 确认
summary没设margin-bottom或padding-bottom干扰定位基准 - 若
summary用了display: flex，伪元素的bottom: 0仍以details为参考，不是summary本身 - 需要边框只出现在展开态？得配合
details[open]::after，并注意transition兼容性（transform可动画，height不行）
真正难的不是加一行scaleY，而是所有依赖offsetHeight或getBoundingClientRect()做高度计算的地方，都要意识到：你看到的“1px”在DPR=2下其实是2物理像素——除非你主动用伪元素把它压回1。
