.border(@borderWidth; @borderStyle; @borderColor; @borderRadius);
}
其他方案：
使用图片：兼容性最好，灵活行最差，不能改变颜色、长度
使用
viewport 和
rem ，
js 动态改变
viewport 中
scale 缩放，缺点在于不适用于已有的项目，例如：使用
vh 和
vw 布局的
<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">使用 css 渐变
linear-gradient 或者
box-shadow上述 3 种方案均有致命缺陷暂不推荐使用
兼容性
最后看一下兼容性如何，主要是伪元素、
transform:scale 和
min-device-pixel-ratio 这几个关键词的兼容性
开源库的解决方案
vant 组件库
跳去 github 查看相关代码
使用
less 写的
.hairline-common() {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
}.hairline(@color: @border-color) {
.hairline-common();
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid @color;
transform: scale(0.5);
}
也是采用第一种解决方案
ant-design-mobile 组件库
跳去 github 查看相关代码
.scale-hairline-common(@color, @top, @right, @bottom, @left) {
content: '';
position: absolute;
background-color: @color;
display: block;
z-index: 1;
top: @top;
right: @right;
bottom: @bottom;
left: @left;
}.hairline(@direction, @color: @border-color-base) when (@direction = 'top') {
border-top: 1PX solid @color;
html:not([data-scale]) & {
@media (min-resolution: 2dppx) {
border-top: none;
&::before {
.scale-hairline-common(@color, 0, auto, auto, 0);
width: 100%;
height: 1PX;
transform-origin: 50% 50%;
transform: scaleY(0.5);
@media (min-resolution: 3dppx) {
transform: scaleY(0.33);
