1px的邊框在devicePixelRatio = 2的retina屏下會(huì)顯示成2px
1. 使用 scale(0.5)
需要使用到:after偽元素
.border {
position: relative;
}
.border:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border-bottom: 1px solid #ff803a;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
box-sizing: border-box;
pointer-events: none;
}
stylus實(shí)現(xiàn)：
border-dpr(style, color, direction = all)
&
position relative
if direction == all
&:after
content " "
width 200%
height 200%
position absolute
top 0
left 0
border 1px style color
-webkit-transform scale(0.5)
transform scale(0.5)
-webkit-transform-origin 0 0
transform-origin 0 0
box-sizing border-box
pointer-events none // 解決內(nèi)部元素?zé)o法點(diǎn)擊問(wèn)題
else
&:after
content " "
position absolute
top 0
left 0
width 200%
height 200%
border-{direction} 1px style color
-webkit-transform scale(0.5)
transform scale(0.5)
-webkit-transform-origin 0 0
transform-origin 0 0
box-sizing border-box
pointer-events none // 解決內(nèi)部元素?zé)o法點(diǎn)擊問(wèn)題
2. 使用border-image
需要使用圖片：
border-line.png
.border {
border-width:1px;
-webkit-border-image: url("border-line.png") 2 stretch;
border-image: url("border-line.png") 2 stretch;
}
