使用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小姐姐的火眼金睛。