如何画一条0.5px的线

最新推荐文章于 2024-01-29 16:54:40 发布

前端~初学者

最新推荐文章于 2024-01-29 16:54:40 发布

阅读量367

点赞数 1

分类专栏： Css 文章标签： html css 前端

本文链接：https://blog.csdn.net/DZQ1223/article/details/131183086

版权

Css 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

文章介绍了在不同浏览器存在差异的情况下，如何使用metaviewport和transform:scale()CSS属性来绘制0.5像素的线条。metaviewport方法适用于移动端，通过缩放视口实现，而transform:scale()则通过Y轴缩放线条达到目的，需配合transform-origin使用。

摘要由CSDN通过智能技术生成

直接设置0.5px，在不同的浏览器会有差异（不同系统的不同浏览器对小数点的px有不同的处理）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .line {
      width: 300px;
      height: 0.5px;
      background-color: #f00;
    }
  </style>
</head>

<body>
  <div class="line"></div>
</body>

</html>

1. 采用meta viewport的方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=0.5" />
  <title>Document</title>
  <style>
    .line {
      width: 300px;
      height: 2px;
      background-color: #f00;

    }
  </style>
</head>

<body>
  <div class=" line">
  </div>
</body>

</html>

width=device-width表示将viewport视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度；
缩放到原来的0.5倍，如果是1px那么就会变成0.5px；
viewport只针对于移动端，只在移动端上才能看到效果。

2. 采用transform: scale()的方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .line {
      width: 300px;
      height: 1px;
      background-color: #f00;
      transform: scaleY(0.5);
      // 一定要加transform-origin，否则线不清晰
      transform-origin: 50% 100%;
    }
  </style>
</head>

<body>
  <div class="line"></div>
</body>

</html>