【第3244期】使用SVG描边来实现移动端1px

前言介绍了通过使用 svg 描边来实现移动端 1px 效果的小技巧。SVG 中的描边是居中的方式，无法更改。可以将 SVG 作为背景图片来使用，通过调整属性实现 1px 效果。今日前端早读课文章由 @XboxYan 分享，公号：前端侦探授权。正文从这开始～～今天介绍一个通过 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 的描边是居中的，两边各是 50.5px 的实现根据上面的结论，如果 stroke-width 为 1 时，那么就很轻松的被分成了两边各 0.5，然后把外侧的部分截断就可以了 ………………………………