奇怪的需求,要0.5px的边框线,有一个巨简单的方法
第一种:使用box-shadow的方法
如图
box-shadow: 0 0 0 0.5px black;
一句话搞定
兼容问题
这种方式在chrome可以,
但是firefox会出现如下情况(将其设置为0.6就会恢复正常,但是设置为0.4,box-shadow就全部消失了)
这里有个坑
就是在移动端(pc端暂时没有发现)有时候要么上面缺一点,要么下边缺一点,有些手机会有圆角发虚的情况,不知道什么原因,经过摸索,层级z-index设置高一点就ok了
第二种:使用伪类after
如图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="border">
</div>
<div id="border-B">
</div>
</body>
</html>
<style type="text/css">
div {
width: 50px;
height: 50px;
}
#border {
border-bottom: 1px solid #000000;
}
#border-B {
position: relative //这里必须必须必须要用定位
}
#border-B::after {
content: " ";
position: absolute;
z-index: 3;
left: 0;
bottom: -1px;
width: 100%;
height: 1px;
border-bottom: 1px solid #000000;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(.5);
transform: scaleY(.5)
}
</style>