使用postcss-write-svg在retina屏繪製1px細線

1、實現方式

本文章採用postcss-write-svg與border-image這個css3屬性進行1px細線的繪製（僅適合直線，圓角建議用transform於僞類實現），其餘的像border-shadow、transform與僞類的實現方式在這裏就不說了，網上也搜獲得。

具體代碼在這webpack-esnext-cli，目錄src/pages/test下有使用svg繪製1px線的所有例子。

2、border-image

簡單介紹一下border-image的拆分：

border-image-source:url('bg.jpg'); // 用於設置背景源圖片
border-image-slice: 1; // 用於設置九宮格上右下左四個方向的裁切比例（也可設置百分比）
border-image-repeat: stretch; // 圖片在各邊進行拉伸、平鋪或重複
border-image-width: 1;  // 定義圖像邊框寬度假如border-image-width大於已指定的border-width，那麼它將向內部(padding/content)擴展.
border-image-outset: 0; // 定義邊框圖像可超出邊框盒的大小
複製代碼

原理能夠看看CSS3 border-image詳解，講解的很清晰了。

3、postcss-write-svg使用

首先咱們先配置好postcss-write-svg，這裏咱們選擇生成base64編碼圖片

require("postcss-write-svg")({
  utf8: false
})
複製代碼

在css中寫一個svg的生成函數

// 倉庫的例子中，我是將svg函數寫在assets/scss/svg.scss中了，經過webpack插件sass-resources-loader自動引用，因此在vue單文件中能夠直接使用不須要再寫一遍
@svg 1px-border {
  width: 4px;
  height: 4px;
  @rect {
    fill: transparent;  // content爲透明
    width: 100%;  // 寬度爲4px * 100%
    height: 100%;  // 高度爲4px * 100%
    stroke-width: 25%;  // 邊框寬度 4px * 25%(即1px)
    stroke: var(--color, black);  // 顏色
  }
}
複製代碼

上面的函數，可讓咱們生成一個有1px邊框，寬高爲4px的矩形，下面是我運用此svg函數生成的1px線：

途中能夠看到，咱們使用普通的border: 1px solid red;生成的1px線是會粗一點的，這是因爲retine屏幕致使的（原理可看大漠的一篇再談Retina下1px的解決方案_CSS, mobile 教程_w3cplus）。下面是該函數的具體應用：

#real-1px {
  margin: 10px;
  height: 20px;
}

#real-1px {
  border: 1px solid;
  border-image: svg(1px-border param(--color red)) 1 stretch;
}
複製代碼

這裏使用25%的裁切（即上右下左各作1px的裁切，獲取裁切出來的部位給咱們的border進行背景的設置），這裏咱們裁切出一個具備1px紅邊框與1px透明內邊框的圖片大概以下圖所示

不少教程裏面會這麼使用，boder: 1px solid transparent，安卓高版本沒問題（至少個人一加沒有問題），可是安卓的部分低版本和iphone，border都不會出現，因此咱們這裏若是是四邊，trasparent去除後能夠解決該問題。

這裏你會發現圖中在低版本安卓和iphone中有個錯誤的上邊框顯示，三條1px邊框是粗的，單邊上邊框倒是細的。

下面是解決方法

// 倉庫中代碼編寫了mixin去作這種兼容，好比設置頂部邊框，則@include setSvgSingleBorder(top);
#real-top-1px {
  ...

  border: 0;    // 將其他三遍的border寬度設置成0
  border-top: 1px solid;   // 這裏將單邊覆蓋上面border的寬度設置
  border-image: svg(1px-border param(--color red)) 1 stretch;
}
複製代碼

上面咱們須要將border的其他三邊不須要顯示紅線的設置爲0，不然將會出現兼容問題，iphone與部分低端安卓沒法正常顯示。這樣咱們就能夠在開發中愉快得使用svg去繪製本身想要的1px細線了。

最後，感謝網上這麼多的文章，感謝公司UI小姐姐的火眼金睛。