乐趣区

关于css:使用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-width1 时,那么就很轻松的被分成了两边各 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 模仿的,比应用伪元素要不便的多,同时也不占据空间,算是绝对完满的解决方案了~

退出移动版