1.scale方法
{
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%; // 要指定origin值, 要不然会模糊
content: "";
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background: red;
}
2.线性渐变linear-gradient, 流览器上面都不完美，效果都是虚的，和完美的0.5px还是有差距
3.使用boxshadow
4.使用SVG
二.几种效果
<!DOCType html>
<html>
<head>
<meta charset="utf-8">
<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);
transform-origin: 50% 100%;
}
.hr.gradient {
height: 1px;
background: linear-gradient(0deg, #ccc, #000);
}
.hr.boxshadow {
height: 1px;
border-radius: 50px;
background: none;
box-shadow: 0 0.5px 0 #000;
}
.hr.svg {
background: none;
height: 1px;
/*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>");*/
background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect fill='red' x='0' y='0' width='1' height='0.5'/></svg>");
background: repeat-x top left url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'><rect x='0' y='0' width='1' height='0.5' fill='#cccccc'></rect></svg>");
background: url("data:image/svg+xml;utf-8,<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>");
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}
</style>
<meta name="viewport" content="width=device-width">
</head>
<body>
<p>svg</p>
<div class="hr svg"></div>
<p>box-shadow: 0 0.5px 0 #000</p>
<div class="hr boxshadow"></div>
<p>linear-gradient(0deg, #fff, #000)</p>
<div class="hr gradient"></div>
<p>1px + scaleY(0.5)</p>
<div class="hr scale-half"></div>
<p>0.5px</p>
<div class="hr half-px"></div>
<p>1px</p>
<div class="hr one-px"></div>
<script>
let div = document.createElement("div");
div.style.height = "0.5px";
//document.body.appendChild(div);
console.log(div.clientHeight);
div.style.boxShadow = "0 0.5px 0 #000";
console.log(div.style.boxShadow);
</script>
</body>
</html>
原址: https://juejin.im/post/5ab65f40f265da2384408a95
三. 画4条边的1像素, 可圆角
用::after设置border：1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角，京东就是这么实现的，缺点是按钮添加active比较麻烦。
.div::after {
content: '';
width: 200%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border: 1px solid #bfbfbf;
border-radius: 4px;
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
-webkit-transform-origin: top left;
}