背景
在 vue.js 下使用 stylus 實現(xiàn) 1 像素 border 邊框，如果使用 css 樣式屬性
border-bottom
實現(xiàn)邊框的話续崖，在 PC 瀏覽器上面是一條 1 像素邊框（1條細線），但是在移動設備上面 DPI 數(shù)值越大遭京，屏幕越清晰嘲玫。使用這個屬性，在移動設備上會變成一條很粗的線璃岳。
實現(xiàn)方式
方式1: 偽類定位 + 縮放
1、首先在要畫邊框的元素上面定義一個偽類悔捶，這個是一個絕對定位的, 通過偽類畫了一個 1 像素邊框铃慷，定位到元素的下邊，就是下邊框
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
2蜕该、實現(xiàn)一個 class 對偽類做縮放犁柜。根據(jù)設備的最小 DPI ，根據(jù)比例對縱軸進行縮放堂淡。
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
方式2 ： 直接用 <div> 實現(xiàn) border
