明天介绍一个通过svg来实现挪动端1px成果的小技巧
svg的描边形式
通常咱们在应用一些设计软件时，描边会有三种抉择，别离是内描边、居中描边和外描边，比方 photoshop
那么，svg 中的描边是哪种形式呢？
答案是居中描边，并且无奈更改，如下
<svg height="100px" viewBox="0 0 100 100"> <rect x='10' y='10' width='40' height='40' fill='none' stroke-width='10' stroke='red' /></svg>能够看到，rect 的描边是居中的，两边各是 5
0.5px的实现
依据下面的论断，如果 stroke-width 为 1 时，那么就很轻松的被分成了两边各 0.5，而后把外侧的局部截断就能够了
这里间接设置 rect 的宽高都为 100%，并且 svg 默认是超出暗藏的 （overflow:hidden），如下
<svg height="100px" viewBox="0 0 100 100"> <rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red' /></svg>这里比照一下1px的成果
<div style="box-sizing: border-box; width:100px;height:100px;border:1px solid red;"></div>能够用手机拜访或者扫描以下网址体验
https://codepen.io/xboxyan/pe...
svg作为背景应用
以上是间接应用 svg 标签，理论我的项目当然不能这样应用了，不过能够将svg 作为背景图片来应用，例如
div { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='none' stroke-width='1' stroke='red' /></svg>");}很简略，在 svg 后面增加一段 data:image/svg+xml, 示意这是一张 svg格局的图片，和 base64 的写法比拟相似，前面 svg 的属性xmlns='http://www.w3.org/2000/svg'示意命名空间，临时还不能去除，记住这层法则就能够了
当然在IE下，svg可能还须要本义能力失常显示，这里能够参考张鑫旭老师的这篇文章
上面来看几个案例
1. 1px分割线
这个在挪动端特地常见，这里能够这样来实现，间接应用 line 画一条底部的线
p { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='red' /></svg>");}成果如下
https://codepen.io/xboxyan/pe...
2. 1px边框
和分割线相似，只是用rect来画一个自适应的矩形，这里宽高均为 100%
div { background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='none' stroke='red' /></svg>");}成果如下
https://codepen.io/xboxyan/pe...
3. 1px带圆角的边框
惯例形式实现带圆角的边框就无能为力了，svg 能够很轻松的实现，借助rx 属性，还有元素本身的border-radius就能够了
div { border-radius:5px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' rx='5' fill='none' stroke='red' /></svg>");}成果如下
https://codepen.io/xboxyan/pe...
总结
以上就是几个svg实现边框的小技巧了，这里是用background-image模仿的，比应用伪元素要不便的多，同时也不占据空间，算是绝对完满的解决方案了~