<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用transform实现1px的细线</title> <style type="text/css"> .line{ position: relative; margin-top: 20px; border:none; } .line:after{ content: ''; position: absolute; top: 0; left: 0; border-top: 1px solid red; -webkit-box-sizing: border-box; box-sizing: border-box; 100%; height: 100%; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: left top; transform-origin: left top; } .line2{ position: relative; margin-top: 40px; border:none; } .line2:after{ content: ''; position: absolute; top: 0; left: 0; border-bottom: 1px solid red; -webkit-box-sizing: border-box; box-sizing: border-box; 100%; height: 100%; -webkit-transform-origin: left top; transform-origin: left top; } </style> </head> <body> <div class='line'>1</div> <div class='line2'>1</div> <script src='js/rem.js'></script> <script src="http://127.0.0.1:8082/target/target-script-min.js#anonymous"></script> </body> </html>
其实是dpi在作怪,现在主流的手机大都是2dpi的,那么一个物理像素会渲染出2px,所以1px的细线就变成了2px,处理方法也很简单。scaleY(0.5)就好。