console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>demo</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
div {
margin: 0 20px 20px;
border-radius: 5px;
}
.a {
border: 1px solid blue;
}
.b {
border: .5px solid blue;
}
.c {
border: .4px solid blue;
}
.e {
height: 1px;
transform: scaleY(.5);
background: blue;
}
.f {
height: 1px;
transform: scaleY(.5);
background: blue;
overflow: hidden;
}
.d {
position: relative;
}
.e:after {
overflow: hidden;
}
span {
background: pink;
border-radius: 5px;
}
.border-line:after {
border-radius: 10px;
}
.border-line:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid blue;
-webkit-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="a">
<span>案例1</span>
<p>"border-width: 1px;"的边框</p>
</div>
<div class="b">
<span>案例2</span>
<p>"border-width: .5px;"的边框</p>
</div>
<div class="c">
<span>案例3</span>
<p>"border-width: .4px;"的边框</p>
</div>
<div class="d border-line">
<span>案例4</span>
<p>通过伪元素制作的边框</p>
</div>
<div style="margin-bottom: 0;">
<span>案例5</span>
<p>"height: 1px; transform: scaleY(.5)"的线</p>
</div>
<div class="e"></div>
<div style="margin-bottom: 0;">
<span>案例6</span>
<p>"height: 1px; transform: scaleY(.5); overflow: hidden;"的线</p>
</div>
<div class="f"></div>
</body>
<script>
$(function () {
$('body').append('设备像素比:' + window.devicePixelRatio)
})
</script>
</html>