根本原因是border-image默认将css像素当逻辑单位处理，而retina屏上1px对应2×2或3×3物理像素，导致亚像素插值发虚；需用整数border-width、border-image-slice:1、image-rendering:crisp-edges及safari专用前缀，并规避渐变透明度与方向关键词兼容问题。
border-image在Retina屏下模糊的根源是像素不对齐
不是border-image语法写错了，而是它默认把CSS像素当逻辑单位处理，而Retina屏上1px CSS像素对应2×2甚至3×3物理像素。当border-width设为1px、border-image-source用linear-gradient()或SVG时，渲染器会在亚像素层面插值——结果就是边框发虚、渐变边缘糊成一片。
关键点在于：浏览器不会自动按设备像素比（dpr）缩放border-image的源图或裁剪逻辑，一切得靠你显式对齐。
-
border-width必须是整数（如2px），避开1.5px这类缩放后产生的非整数值 - 若用SVG作
border-image-source，SVG文件里必须声明viewBox="0 0 100 100"且所有路径坐标为整数（禁用d="M0.5,0.5"） - 加
image-rendering: crisp-edges仅对SVG源生效，对CSS渐变无效；Safari需额外加-webkit-optimize-contrast
用border-image-slice: 1避免渐变被切碎
很多按钮边框用linear-gradient(to right, #ff6b6b, #4ecdc4)做源，但border-image-slice: 20会从四边向内切掉20像素，直接把渐变起点/终点裁掉——高分屏下更明显，因为裁剪坐标没随dpr缩放。
最稳做法是设border-image-slice: 1，它表示“不分割图像，整张图拉伸填充”，对线性渐变和径向渐变都友好。
- 别写
border-image-slice: 20 20 20 20，除非你真做了带留白的sprite图 -
border-image-width优先用vw（如0.3vw）或calc(1px + 0.1vw)，不用em/rem——后者在border-image中解析不稳定 - 必须配
border-style: solid，只设border-width和border-image-source不会触发渲染
移动端Safari对border-image的渐变支持有硬伤
iOS 15–16的Safari有个已知bug：border-image-source: linear-gradient(to right, ...)若含透明度（如rgba(0,0,0,0.2)）或方向关键词（to right、to bottom），整个边框可能不显示。这不是你代码的问题，是渲染引擎漏掉了某些渐变语法分支。
绕过方案很直接：改用角度写法，并避开alpha通道。
- 把
linear-gradient(to right, #ff6b6b, #4ecdc4)换成linear-gradient(90deg, #ff6b6b, #4ecdc4) - 颜色全用十六进制或rgb()，不用rgba()；需要半透效果就靠
opacity控制容器，别塞进渐变里 - 测试时打开Safari开发者工具 → Elements → 检查
border-image-source是否显示为none，是的话基本就是这个bug
伪元素模拟高清边框时容易漏掉transform-origin
用::after画高清边框（比如transform: scale(0.5)）是常见方案，但在Retina屏下，如果transform-origin没对准边框位置，缩放后边框会偏移甚至消失。
例如给按钮底部加高清边框，::after要覆盖右/下边缘，那么transform-origin必须设为center bottom，否则scale(0.5)会让边框向上错位50%。
- 水平边框（top/bottom）：
transform-origin: center [top/bottom] - 垂直边框（left/right）：
transform-origin: [left/right] center - 媒体查询里必须用
(min-resolution: 2dppx)包裹伪元素样式，iOS Safari 16+已废弃-webkit-min-device-pixel-ratio - 别在同一个元素上同时写
border和伪元素边框，否则视觉厚度翻倍
border-image-slice值和border-width的整数对齐、Safari对渐变方向的兼容限制、还有transform-origin这种只差一个单词就失效的细节。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
