我们都知道，px 是电子屏幕显示的最小单位，我们称之为像素，一般来说这个单位的数值只能是整数。 曾看过淘宝，京东，易迅，一号店等等电商的移动端网站，这些大的电商站的共同特点是做的精致，用户体验良好，其中在布局方面，0.5px 的线看上去就比 1px 的线看上去要精致很多。 但是我在做测试的时候发现，直接把 border 的值设置为 0.5px solid #222，手机上显示的效果与 1px solid #222 相同，这样看起来线条很粗，经过查找资料得到以下的实现办法： .border { position: relative } .border:after { position: absolute; top: 0; left: 0; display: block; box-sizing: border-box; width: 200%; height: 200%; border: 1px solid red; content: " "; transform: scale(.5); transform-origin: 0 0 }