在這裡我只介紹下邊框的實現：

實現原理：偽類+縮放

工具：stylus預編譯器

1、在 stylus資料夾中建立mixin.styl檔案，內容如下：（即通過偽類+子絕父相 實現1px的下邊框，這只是開始，並沒有結束 ）

border-1px($color)
   position: relative
   &:after
       display: block
       position: absolute
       left: 0
       bottom: 0
       width: 100%
       border-top:1px solid $color
       content: ' '
 

2、在 stylus資料夾中建立base.styl檔案，內容如下：（根據裝置的dpr確定y軸的縮放比例）

@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)
 

3、在 stylus資料夾中建立index.styl檔案，內容如下：（其中的icon為圖示字型的樣式）

@import './mixin'
@import './icon'
@import './base'

4、在main.js中引入

import './common/stylus/index.styl'

5、直接在class中使用'border-1px',即可實現1px的下邊框（上，左，右邊框可參考如上程式碼）

6、最後來看看區別：