border的长度怎么设置_CSS完美的0.5px直线四周border解决
⽅案
⼀句话总结
⽤伪元素画出200%宽⾼的边，然后transform scale(0.5)缩⼩，然后⽤pointer-events：none去除点击/聚焦事件。
先总结0.5px线的常见画法
1、乞丐版本
.hr{
border:0.5px solid red;
}
缺点⾮常多，⼏乎不能兼容，常见的浏览器都是真实显⽰1px。
线性渐变linear-gradient
2、逻辑可⾏、实际很惨的线性渐变linear-gradient
.hr.gradient {
height: 1px;
background: linear-gradient(0deg, #fff, #000);
}
缺点是明显发虚，不是真实的0.5px实线
boxshadow⽅式
3、boxshadow
.hr.boxshadow{
box-shadow: 00.5px0#000;
}
缺点是各流览器都是虚的，也不是完美⽅案
4、使⽤SVG
完美的解决⽅案，还可以适配不同形状的图形。
原理是利⽤SVG的描边属性为1物理像素（物理像素最低也必须得有1，不然什么也看不见了），是⾼清屏的0.5px。
缺点是有些复杂，简单的直线不必上SVG。
若⽤SVG时，部分场景也需要绝对定位和设置pointer-events : none;
<object data="./halfLine.svg" type="image/svg+xml" />
SVG⽂件（halfLine.svg）
<svg xmlns='/2000/svg' width='100%' height='1px'>
<line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
</svg>
5、transform(0.5）
borderbox
完美的解决⽅案，简单易⽤。
缺点是只能画直线和border，缺点是有实际⽂档流中的体积，且配合按钮写宽度不好计算及控制。使⽤伪元素，将伪元素绝对定位且设置⽆事件，可以完美解决体积及不好控制的问题。代码如下：
<!DOCTYPE html>
<html lang="en">
<body>
<style>
.half-1px-line, .half-1px-border{
position:relative
}
.half-1px-line::after, .half-1px-border::after{
content        : '';
position        : absolute;
width          : 200%;
height          : 200%;
top            : 0;
left            : 0;
transform-origin: 0 0;
border-width    : 1px;
border-style    : solid;
transform      : scale(0.5, 0.5);
border-radius  : 1px;
box-sizing      : border-box;
pointer-events  : none;
}
.half-1px-line::after{
border-width: 0;
border-bottom-width:1px;
}
</style>
<div class="half-1px-line">单线</div>
<br>
<div class="half-1px-border">四周0.5px</div>
</body>
</html>
参考⽂档
怎么画⼀条0.5px的边（更新） - 掘⾦j uejin.im

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。