画一条0.5px的线

最新推荐文章于 2024-04-13 00:00:00 发布

qq_37820215

最新推荐文章于 2024-04-13 00:00:00 发布

阅读量5k

点赞数 4

分类专栏：查漏补缺

本文链接：https://blog.csdn.net/qq_37820215/article/details/107212531

版权

查漏补缺专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

//画一条0.5px的线
<!DOCType html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .half-px {
            width: 300px;
            background-color: #000;
            height: 0.5px;
        }
    </style>
</head>
<body>
    <div class="half-px"></div>
</body>
</html>

谷歌浏览器：把0.5px四舍五入变成了1px

2、设置成1px，然后使用缩放功能

//画一条0.5px的线
<!DOCType html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .half-px {
            width: 300px;
            background-color: #000;
            height: 1px;
            transform: scale(0.5)
        }
    </style>
</head>
<body>
    <div class="half-px"></div>
</body>
</html>

3、采用meta viewport的方式

<meta name="viewport" content="width=device-width,initial-sacle=0.5">
//width=device-width表示将viewport视窗的宽度调整为设备的宽度，这个宽度通常是指物理上宽度。

//缩放到原来的0.5倍，如果是1px那么就会变成0.5px

//viewport只针对于移动端，只在移动端上才能看到效果

4、canvas/svg方式画一条0.5px的线

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <!-- canvas画布方式 -->
  <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
  <!-- svg方式 -->
  <svg id="svgLineTutorial"  height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
    <line x1="50" y1="50" x2="200" y2="200" style="stroke:Green;stroke-width:0.5"/>
  </svg>

  <script>
    var drawing = document.getElementById("drawing");  
    if (drawing.getContext){ 
      var context = drawing.getContext("2d"); 
      context.lineWidth = 0.5;
      context.beginPath(); 
      context.moveTo(30, 30); 
      context.lineTo(200, 100);
      context.stroke(); 
    }
  </script>
</body>
</html>

https://www.cnblogs.com/xiaocaiyuxiaoniao/p/10156680.html

qq_37820215

关注

4
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
画一条0.5px的线

1、直接设置0.5px，在不同的浏览器会有差异（不同系统的不同浏览器对小数点的px有不同的处理）//画一条0.5px的线<!DOCType html><html><head> <meta charset="utf-8"> <style> .half-px { width: 300px; background-color: #000; .
复制链接

扫一扫