0.5 px的边框
2018-11-27 本文已影响9人
你期待的花开
实现的原理 ：使用伪元素设置1px的边框，然后对边框进行缩放(scaleY)。
- 设定目标元素的参考位置。
- 给目标元素设置伪元素before或者after，并设置绝对定位。
- 给伪元素添加1px的边框。
- 宽和高设置为 200%。
- 调整盒子模型的位置，以左上角为基准 transform-origin: 0。
- 整个盒子模型缩小为0.5。
<!DOCTYPE html>
<html>
<head>
<title>慕课网网页布局</title>
<meta charset="UTF-8">
<style>
.box1 {
background-color: red;
border: 1px solid black;
width: 100px;
height: 100px;
margin-left: 400px;
margin-top: 100px;
}
.box2 {
background-color: red;
border: 0.5px solid black;
width: 100px;
height: 100px;
margin-left: 400px;
margin-top: 200px;
}
.box3 {
position: relative;
background-color: red;
width: 100px;
height: 100px;
margin-left: 400px;
margin-top: 200px;
}
.box3::after {
position: absolute;
content: "";
border: 1px solid black;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
}
</style>
</head>
<body>
<div class="box1" ></div> // 添加 1px 的边框
<div class="box2" ></div> // 添加 0.5px 的边框，无效果
<div class="box3"></div> // 添加 0.5px 的边框，有效果
</body>
</html>
