首页>资讯 > >正文

[CSS-tricks]自定义"border-style"


【资料图】

css中的border-style渲染结果固定,并且不同浏览器中的表现也可能不一样,这带来许多不便。

例如,有时候我们希望圆点边框更加密集,然而此间距与border-width绑定。

这类边框,需要全边联动的效果,才不显得突兀。因此,我们可以借助SVG中stroke的良好可自定义性,通过background绘制边框。

此“边框”由裁切的四部分互相补充而成,他们在形状上是完全相同的,但位置不一样,因此可以在裁切后完美组合起来。不使用单个矩形是因为使用CSS设置样式(calc)在SVG中兼容性不佳,并且双calc()会出现问题,否则我们可以直接绘制一个固定边距的矩形。

我们可以通过stroke-linecap(线帽形状)、stroke-dasharray(虚线长度)、stroke-width(线宽)改变形状,通过rx、ry和border-radius应用圆角。

例如,在此处,线帽为圆形,虚线长度为0px,间隔为12px,线宽为12px,因此呈现出数个圆点。同时仅保留每个部分的一角。

标签:

相关阅读

精选文章

精选图片