脑洞大开：如何使用CSS实现自定义圆角虚线框

脑洞大开：如何使用CSS实现自定义圆角虚线框

在CSS中，我们常用border来表示一个元素的边框样式，也可以使用border来绘制简单的分割线。最近遇到一个项目，需要用虚线来显示元素的边框。初步一看，这不很简单嘛，一行代码搞定border:1pxdashed#ccc。自我感觉良好，结果UI的同事直接提刀来了，“这是我想要的效果吗，我要的是&#%$^…”。没办法，还是老老实实想办法解决自定义的虚线边框。
border首先来回顾一下border的使用。border是一个简写属性，具体的可拆分为：border-width、border-style、border-color，分别表示宽度、类型、颜色。直接使用border，默认是给元素添加“上右下左”的边框。
比如说我们想给某一元素添加边框，则可以：
div{border:2pxdashedred;width:200px;height:200px;}实现效果

或者也可以用border来实现分割线：
//水平分割线.divider{width:100%;height:0;border-top:1pxsolidred;//只需要上边框，使用下边框也可}实现效果：

dashed
先来一段MDN上面关于dashed属性的介绍：
Displaysaseriesofshortsquare-endeddashesorlinesegments.Theexactsizeandlengthofthesegmentsarenotdefinedbythespecificationandareimplementation-specific.
翻译过来就是：dashed没有定义线段的长度和大小，只能根据具体的border-width实现其长度和大小。
所以，直接使用dashed是不能完成目标的。
自定义虚线一条虚线看起来是由多个小线段组成，然后中间保持固定的间距，如果我们能先绘制一个小线段，然后在水平或者垂直方向重复放置，不就可以实现自定义的虚线了嘛，因为这些都是自己写的，没有直接使用dashed。
为了解决这个问题，我们需要使用到两个重要的CSS属性：background-image和linear-gradient，采用渐变的方式实现小线段，并保持固定的间距。
直接看代码：
div{height:1px;background-image:linear-gradient(toright,red0%,red50%,transparent50%);background-size:8px1px;}实现效果：

渐变默认会撑满整个元素，如果设置了background-repeat:no-repeat将只会有一个小线段。重点解释一下linear-gradient的执行过程：
指定渐变的方向，从左到右。toright
由一个颜色值和终点位置组成一个渐变颜色节点，要完成渐变操作至少需要2个这样的节点。#ccc0%,#ccc50%表示从0到50%渐变为#ccc颜色。
transparent50%表示从50%开始到100%，渐变为透明色。这样视觉上看起来就像是有了间距。
四分之一圆角设置圆角可使用border-radius，同样这个也是一个简写属性，具体可分为：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius，分别表示左上、右上、右下、左下的圆角。
直接使用border-radius显示的是四个角的圆角，很显然，四分之一圆角只需要取一个方向的radius即可。
画一个圆
.circle{width:32px;height:32px;border-radius:32px;border:1pxsolidred;}画一个左上的四分之一圆
.quarter-circle{width:32px;height:32px;border-top-left-radius:32px;border:1pxsolidred;}画一个左上的四分之一圆弧
.quarter-circular-arc{width:32px;height:32px;border-top-left-radius:32px;border-top:1pxsolidred;border-left:1pxsolidred;}实现效果：

其他方向的圆弧，则可通过具体的border和boder-radius画出。
自定义圆角虚线边框虽然我们可以使用渐变来实现虚线效果，但是却无法实现圆角。好在，我们已经做好了准备工作，可以分别画出一个虚线以及四分之一圆角。接下来就是实现一个自定义的圆角虚线边框。
本文采用的方式是通过position定位的方式，分别将四条边和四个圆角放在对应的位置。实现方式也比较简单，就是有点繁琐。具体看代码：
HTML按照上右下左的顺序
<divclass="dash-box"><p>dashbox</p><divclass="dash-top"></div><divclass="dash-right"></div><divclass="dash-bottom"></div><divclass="dash-left"></div><divclass="dash-top-radius"></div><divclass="dash-right-radius"></div><divclass="dash-bottom-radius"></div><divclass="dash-left-radius"></div></div>CSS
.dash-box{position:relative;width:400px;height:100px;display:flex;justify-content:center;align-items:center;}.dash-left{width:1px;position:absolute;left:0;top:4px;bottom:4px;background-image:linear-gradient(totop,#ccc0%,#ccc50%,transparent50%);background-size:1px8px;}.dash-right{width:1px;position:absolute;right:0;top:4px;bottom:4px;background-image:linear-gradient(tobottom,#ccc0%,#ccc50%,transparent50%);background-size:1px8px;}.dash-top{height:1px;position:absolute;left:4px;right:4px;top:0;background-image:linear-gradient(toright,#ccc0%,#ccc50%,transparent50%);background-size:8px1px;}.dash-bottom{height:1px;position:absolute;left:4px;right:4px;bottom:0;background-image:linear-gradient(toleft,#ccc0%,#ccc50%,transparent50%);background-size:8px1px}.dash-top-radius{position:absolute;left:0;top:0;width:2px;height:2px;border-top:1pxsolid#ccc;border-left:1pxsolid#ccc;border-top-left-radius:100%;}.dash-right-radius{position:absolute;right:0;top:0;width:2px;height:2px;border-top:1pxsolid#ccc;border-right:1pxsolid#ccc;border-top-right-radius:100%;}.dash-bottom-radius{position:absolute;bottom:0;right:0;width:2px;height:2px;border-bottom:1pxsolid#ccc;border-right:1pxsolid#ccc;border-bottom-right-radius:100%;}.dash-left-radius{position:absolute;left:0;bottom:0;width:2px;height:2px;border-bottom:1pxsolid#ccc;border-left:1pxsolid#ccc;border-bottom-left-radius:100%;}最终效果
需要注意圆弧的大小和自定义的虚线段有关。
总结本文采用渐变和圆角，解决自定义圆角虚线边框的问题
边框可以采用渐变色，但是圆角部分的颜色无法使用渐变，这也是此方案不足的地方。如果有其他方案实现，欢迎大家在评论区交流。
2024-09-18