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

在CSS中，我们常用border来表示一个元素的边框样式，也可以使用border来绘制简单的分割线。最近遇到一个项目，需要用虚线来显示元素的边框。初步一看，这不很简单嘛，一行代码搞定border: 1px dashed #ccc。自我感觉良好，结果UI的同事直接提刀来了，“这是我想要的效果吗，我要的是……”。没办法，还是老老实实想办法解决自定义的虚线边框。

border

首先来回顾一下border的使用。border是一个简写属性，具体的可拆分为：border-width、border-style、border-color，分别表示宽度、类型、颜色。直接使用border，默认是给元素添加“上右下左”的边框。

比如说我们想给某一元素添加边框，则可以：

div {
    border: 2px dashed red;
    width: 200px;
    height: 200px;
}

实现效果

或者也可以用border来实现分割线：

// 水平分割线
.divider {
    width: 100%;
    height: 0;
    border-top: 1px solid red; // 只需要上边框，使用下边框也可
}

实现效果：

dashed

先来一段MDN上面关于dashed属性的介绍：

Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.

翻译过来就是：dashed没有定义线段的长度和大小，只能根据具体的border-width实现其长度和大小。

所以，直接使用dashed是不能完成目标的。

自定义虚线

一条虚线看起来是由多个小线段组成，然后中间保持固定的间距，如果我们能先绘制一个小线段，然后在水平或者垂直方向重复放置，不就可以实现自定义的虚线了嘛，因为这些都是自己写的，没有直接使用dashed。

为了解决这个问题，我们需要使用到两个重要的CSS属性：background-image和linear-gradient，采用渐变的方式实现小线段，并保持固定的间距。

直接看代码：

div {
    height: 1px;
    background-image: linear-gradient(to right, red 0%, red 50%, transparent 50%);
    background-size: 8px 1px;
}

实现效果：

渐变默认会撑满整个元素，如果设置了background-repeat: no-repeat将只会有一个小线段。重点解释一下linear-gradient的执行过程：

• 指定渐变的方向，从左到右。to right
• 由一个颜色值和终点位置组成一个渐变颜色节点，要完成渐变操作至少需要2个这样的节点。#ccc 0%, #ccc 50%表示从0到50%渐变为#ccc颜色。
• transparent 50%表示从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: 1px solid red;
}

画一个左上的四分之一圆

.quarter-circle {
    width: 32px;
    height: 32px;
    border-top-left-radius: 32px;
    border: 1px solid red;
}

画一个左上的四分之一圆弧

.quarter-circular-arc {
    width: 32px;
    height: 32px;
    border-top-left-radius: 32px;
    border-top: 1px solid red;
    border-left: 1px solid red;
}

实现效果：

其他方向的圆弧，则可通过具体的border和boder-radius画出。

自定义圆角虚线边框

虽然我们可以使用渐变来实现虚线效果，但是却无法实现圆角。好在，我们已经做好了准备工作，可以分别画出一个虚线以及四分之一圆角。接下来就是实现一个自定义的圆角虚线边框。

本文采用的方式是通过position定位的方式，分别将四条边和四个圆角放在对应的位置。实现方式也比较简单，就是有点繁琐。具体看代码：

HTML按照上右下左的顺序

    <div class="dash-box">
        <p>dash box</p>
        <div class="dash-top"></div>
        <div class="dash-right"></div>
        <div class="dash-bottom"></div>
        <div class="dash-left"></div>
        <div class="dash-top-radius"></div>
        <div class="dash-right-radius"></div>
        <div class="dash-bottom-radius"></div>
        <div class="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(to top, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 1px 8px;
}
.dash-right {
    width: 1px;
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    background-image: linear-gradient(to bottom, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 1px 8px;
}
.dash-top {
    height: 1px;
    position: absolute;
    left: 4px;
    right: 4px;
    top: 0;
    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 8px 1px;
}
.dash-bottom {
    height: 1px;
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    background-image: linear-gradient(to left, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 8px 1px
}
.dash-top-radius {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 2px;
    border-top:1px solid #ccc;
    border-left: 1px solid #ccc;
    border-top-left-radius: 100%;
}
.dash-right-radius {
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 2px;
    border-top:1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top-right-radius: 100%;
}
.dash-bottom-radius {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2px;
    height: 2px;
    border-bottom:1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom-right-radius: 100%;
}
.dash-left-radius {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2px;
    height: 2px;
    border-bottom:1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom-left-radius: 100%;
}

最终效果

需要注意圆弧的大小和自定义的虚线段有关。

总结

• 本文采用渐变和圆角，解决自定义圆角虚线边框的问题
• 边框可以采用渐变色，但是圆角部分的颜色无法使用渐变，这也是此方案不足的地方。如果有其他方案实现，欢迎大家在评论区交流。