实现半像素边框
moke 2018-12-17 16:43:04 CSS
# 思路
普通的 1px 黑色实线边框
.border {
border: 1px solid #000;
}
半像素边框当然不是简单地把 1px 改为 0.5px(没测试过,可能会被解析成 1 或者 0),border-width 的值只能是自然数
类似的,outline, box-shadow 等等也没有办法画出 0.5px 的细线
常规思路是不可行的,我们可以用伪元素 + 缩放巧妙地实现,具体步骤如下:
- 设置目标元素作为定位参照
.thinner-border {
position: relative;
}
- 给目标元素添加一个伪元素 before 或者 after,并设置绝对定位
.thinner-border:before {
content: '';
position: absolute;
}
- 给伪元素添上 1px 的边框
.thinner-border:before {
border: 1px solid red;
}
- 设置伪元素的宽高为目标元素的 2 倍
.thinner-border:before {
width: 200%;
height: 200%;
}
- 缩小 0.5 倍(变回目标元素的大小)
.thinner-border:before {
transform-origin: 0 0;
transform: scale(0.5, 0.5);
}
- 把 border 包进来
.thinner-border:before {
box-sizing: border-box;
}
简言之就是先放大再缩回来,border-box 是关键,否则边框不会一起缩放