0.5px 问题

首先明确一点，就是非高清屏（即基本符合96ppi）上浏览器并不会进行缩放，也就没有“1px”问题 所以部分解决方案中要按需进行css媒体查询，根据设备dpr来区分是否需要解决“1px”问题 0.5px 这个方案原理比较简单，主要是看浏览器是否支持并能准确的显示小数值 该方案兼容性较差，实际可能还是按1px渲染 伪元素 + transform scale 原理分析 border无法直接利用transfrom来缩放，于是通过在元素上原本需要边框的位置添加一个宽或高为1px的伪元素来“冒充”边框，转而对该伪元素整体进行缩放 div::after { display: block; content: ''; height: 1px; // 通过scale变换，元素整体缩小一半 transform: scale(.5); }

伪元素 + 渐变背景色
原理分析
仍然是通过添加伪元素来“冒充”边框，再设置该伪元素背景为透明到有颜色的渐变，利用透明的部分背景使元素整体视觉效果变窄

div::after { display: block; content: ''; height: 1px; // 背景一半透明，一半黑色，视觉上缩小一半 background: linear-gradient(#000 50%, transparent 50%); }