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

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

在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>
.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%;
需要注意圆弧的大小和自定义的虚线段有关。
本文采用渐变和圆角，解决自定义圆角虚线边框的问题
边框可以采用渐变色，但是圆角部分的颜色无法使用渐变，这也是此方案不足的地方。如果有其他方案实现，欢迎大家在评论区交流。
原创不易，转载请注明出处。