画一条0.5px的线

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

画一条0.5px的线相关推荐

前端面试题：如何画一条0.5px的线
前言理论上1px已经是最小单位了,那如何画一条0.5px的线呢? 有以下两种方法解决方法采用meta viewport的方式 <meta name="viewport" ...
如何画一条0.5px的边（细线）
理论上1px已经是最小单位了,那如何画一条0.5px的线呢解决办法: 1.移动端,使用meta viewport 的方式 <meta name="viewport" con ...
画出0.5px的线，css
1,box-shadow box-shadow允许小数点,该属性可设置的值包括阴影的X轴偏移量.Y轴偏移量.模糊半径.扩散半径和颜色,所以我们可以设置他的扩散半径来实现0.5px的线 2, tran ...
[html] 你能否画出一个0.5px的直线？
[html] 你能否画出一个0.5px的直线? 通过scale(0.5)来实现个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关 ...
CAD画图教程：CAD怎么画一条指定长度的线？
在CAD入门学习过程中,画直线是基础操作之一,所以一定要对此熟练掌握才可以.那你知道CAD怎么画一条指定长度的线吗?本节CAD画图教程就和小编一起来了解一下在浩辰CAD软件中怎么画一条指定长度的直线吧 ...
前端页面设计0.5px的线
首先,我们先来了解几个概念. 物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元(像素颗粒),在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值. ...
CSS实现0.5px的线 0.5rpxborder边框
1.0.5px的线核心代码就是通过transfrom的scaleY属性,溢出隐藏掉就可以了 // html <div class="line"></div> ...
画一条连接两点的线，由两点坐标确定一条直线
页面上有两颗星星图标,画一条线连接两颗星星. 1.先获取两点的坐标 2.计算弦长及旋转角度 3.绘制线 <div class="quality-analysis"&g ...
ArcGIS技巧（一）画一条特别直的线要素
问题:在画线要素时点击起点终点后经常画不出一条特别直的线(有锯齿). 解决:点击起点后,不要着急点击终点,此时右键选择<方向>,输入0,回车. 在点击终点,就是一条特别直的线了.

画一条0.5px的线

画一条0.5px的线相关推荐

最新文章

热门文章