一、meta viewport（只用于移动端）
<meta name="viewport"
content="width=device-width, initial-scale=0.5,minimun-scale=0.5,maximum=0.5">scale的值一般为1.0，现在设置为0.5，css设置像素的时候按正常值设置为1px就行
二、transform:scale()方法
写法一：
<head>
<style>
div{
height: 1px;
width: 100px;
background-color: black;
transform: scaleY(0.5);
transform-origin: 50% 100%;
}
</style>
</head>
<body>
<div>
</div>
</body>写法二：
<head>
<style>
div{
height: 1px;
width: 100px;
background-color: black;
transform: scale(0.5,0.5);
}
</style>
</head>
<body>
<div>
</div>
</body>两种写法呈现的效果不一样，写法二的直线长度变为50px
三、线性渐变 linear-gradient
<head>
<style>
div{
height: 1px;
width: 100px;
blackground: linear-gradient(0deg, #fff, black)
}
</style>
</head>
<body>
<div>
</div>
</body>原理：1像素高的直线，只画一半，一半黑，一半白，白色和背景色一致，相当于没有。
四、利用阴影 box-shadow
<head>
<style>
div{
height: 1px;
width: 100px;
box-shadow: 0 0.5px 0 #000;
/* 利用css对于阴影的处理方法，四个值分别表示 x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
}
</style>
</head>
<body>
<div>
</div>
</body>关于CSS的box-shadow属性详解：box-shadow - CSS：层叠样式表 | MDN (mozilla.org)
五、SVG方法
<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">
<style>
div{
width: 100px;
}
</style>
<title>Document</title>
</head>
<body>
<div>
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
<line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
</svg>
</div>
</body>SVG的1px相当于物理像素1px，是高清屏的0.5px
参考帖子：怎么画一条0.5px的边（更新） - 掘金 (juejin.cn)
SVG相关知识：SVG <line> (w3school.com.cn)
六、canvas方法
canvas方法和scale方法类似，都是通过缩放实现0.5px
<body>
<canvas id="myCanvas" width="200" height="100" style="border:0px solid white;">
</canvas>
<script>
// 获取canvas
var c = document.getElementById("myCanvas");
// 用2d绘图
var ctx = c.getContext("2d");
// 先定义状态
ctx.moveTo(5, 50);
ctx.lineTo(75, 50);
ctx.scale(1, 0.5);
// 再画直线
ctx.stroke();
</script>
</body>
【和上面的方法相比，这段代码呈现出来的线条较浅，暂时没找出是什么原因，所以未必正确，仅作参考】
canvas教程：HTML5 Canvas | 菜鸟教程 (runoob.com)
七、放一张0.5px的背景图
这种方法简单，就不赘述了
（自言自语~放在末尾~
面试时候听到的是画一条1px的直线，回来搜索答案一般都是画0.5px的，不知道是否记忆有偏差。
这篇帖子先梳理0.5px的问题）
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
