使用svg描边来实现移动端1px
今天介绍一个通过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/
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>");
}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>");
}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>");
}总结
以上就是几个svg实现边框的小技巧了，这里是用background-image模拟的，比使用伪元素要方便的多，同时也不占据空间，算是相对完美的解决方案了~
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
