使用小数点(兼容不好)
目前只有ios8以上已经支持带小数的px值, media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #999 }
}
background渐变(不利于扩展)
// 上边框
@media screen and (-webkit-min-device-pixel-ratio: 2){
.ui-border-t {
background-position: left top;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.5,transparent),color-stop(0.5,#e0e0e0),to(#e0e0e0));
}
}
css3的clip-path属性(目前有些浏览器还未兼容)
.half-line {
background-color: red;
height: 1px;
line-height: 1px;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
利用伪元素(推荐)
// 细边框
@mixin border($a:false, $b:false) {
@if $a {
border-#{$a}: 1px solid $text-border;
} @else {
border: 1px solid $text-border;
}
@if $b {
border-#{$b}: 1px solid $text-border;
}
}
@mixin border-after-a {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
width: 200%;
height: 200%;
// box-sizing: border-box;
transform: scale(0.5, 0.5);
transform-origin: left top;
}
.bt, .bb, .bl, .br, .btb, .blr, .ba {
position: relative;
border: none;
z-index: 2; // 解决popup弹出框内的边框z轴问题
&::after {
@include border-after-a;
}
}
// 上边框
.bt:after {@include border('top')}
// 下边框
.bb:after {@include border('bottom')}
// 左边框
.bl:after {@include border('left')}
// 右边框
.br:after {@include border('right')}
// 上下边框
.btb:after {@include border('top', 'bottom')}
// 左右边框
.blr:after {@include border('left', 'right')}
// 上下左右边框
.ba:after {@include border}