画0.5px 1px 1.5px 的线

precious angel

于 2021-03-30 16:39:21 发布

阅读量775

点赞数

文章标签： html

本文链接：https://blog.csdn.net/qq_44622064/article/details/115329625

版权

本文详细介绍了如何使用CSS在不同设备上绘制0.5px, 1px, 1.5px等精细线条，解决了在高分辨率屏幕上线条显示模糊或过粗的问题，包括使用transform缩放技巧和border-image方法。" 119523089,5659740,PyTorch中的循环神经网络实践,"['深度学习', 'Python', 'PyTorch-RNN', 'LSTM', 'GRU']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hr{
            width: 300px;
            background-color: #000;
        }
        .hr.half-px{
            height: 0.5px;
        }
        .hr.one-px{
            height: 1px;
        }
        .hr.scale-half{
            height: 1px;
            transform: scaleY(0.5)
        }
    </style>
</head>
<body>
    <p>0.5px</p>
    <div class="hr half-px"></div>
    <p>1px</p>
    <p class="hr one-px"></p>
    <p>1px+scaleY(0.5)</p>
    <div class="hr scale-half"></div>
</body>
</html>