<!DOCType html> <html> <head> <meta charset="utf-8"> <style> .hr { width: 300px; background-color: #000; } .scale-half { height: 1px; transform: scaleY(0.1); /* 延Y轴缩小1倍 */ transform-origin: 50% 100%; /* 改变元素变形的原点 */ } .hr.half-px { height: 0.5px; } .hr.one-px { height: 1px; } </style> </head> <body> <p>1px + scaleY(0.5)</p> <div class="hr scale-half"></div> <p>0.5px</p> <div class="hr half-px"></div> <p>1px</p> <div class="hr one-px"></div> </body> </html>
