乐趣区

关于前端:CSS小技巧之圆形虚线边框

jiezi

虚线置信大家日常都用的比拟多，常见的用法就是应用 border-style 管制不同的款式，比方设置如下边框代码：

border-style: dotted dashed solid double;

这将设置顶部的边框款式为点状，左边的边框款式为虚线，底部的边框款式为实线，右边的边框款式为双线。如下图所示：

border-style 除了下面所反对的款式还有 groove ridge inset outset 3D 相干的款式设置，对于 border-style 的相干应用本文并不过多介绍，有趣味的能够看官网文档。本文次要介绍应用 CSS 突变实现更自定义化的虚线边框，以满足需要中的非凡场景应用。如封面图所示的 6 种状况足以体现足够自定义的边框款式，接下来看实现形式。

功能分析

基于封面图剖析实现这类虚线边框应该满足一下几个性能配置：

  • 虚线的点数量
  • 虚线的色彩，能够纯色，多个色彩，渐变色
  • 虚线的粗细水平
  • 虚线点之间的距离宽度

因为咱们是自定义的虚线边框，所以尽可能不减少额定的元素，所以虚线的内容应用伪元素实现，而后应用定位笼罩在元素内容的上方，那么你必定有疑难了，既然是笼罩在元素的上方，那不上遮挡了元素自身吗？

来到本文自定义圆形虚线边框的要害局部，这里咱们应用 CSS mask 实现，并配合应用 -webkit-mask-composite: source-in 显示元素自身的内容。

-webkit-mask-composite: 属性指定了将利用于一个元素的多个蒙幅员像合成显示。当一个元素存在多重 mask 时，咱们就能够使用 -webkit-mask-composite 进行成果叠加。

代码实现

首先基于下面剖析的几个性能配置进行变量定义，不便后续更改变量值即可调整边框款式。

--n:20;   /* 管制虚线数量 */
--d:8deg; /* 管制虚线之间的间隔 */
--t:5px;  /* 管制虚线的粗细 */
--c:red;  /* 管制虚线的色彩 */

对应不同的元素传入不同的值：

<div class="box" style="--n:3;--t:8px;--d:10deg;--c:linear-gradient(45deg,red,blue)">3</div>
<div class="box" style="--n:6;--t:12px;--d:20deg;--c:green">6</div>

而后给伪元素设置根底的款式，定位，背景色，圆角等。

.box::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--c);
}

按不同的元素传入不同的背景色，最终的成果是这样的。

持续设置在 mask 中设置一个反复的锥形突变 repeating-conic-gradient，代码如下：

repeating-conic-gradient(from calc(var(--d)/2),
  #000 0 calc(360deg/var(--n) - var(--d)),
  #0000 0 calc(360deg/var(--n))
)
  • from calc(var(--d)/2) 定义了突变的终点，以虚线之间的间隔除以 2 能够让最终有对称的成果
  • #000 0 calc(360deg/var(--n) - var(--d))：定义了第一个色彩为彩色（#000），终点地位为 0，终止地位为 360deg/var(--n) - var(--d) 度，基于虚线之间的间隔和虚线的个数计算出每段虚线的突变终止地位
  • #0000 0 calc(360deg/var(--n))：定义了第二个色彩为通明色，终点地位为 0，终止地位为基于虚线的个数计算，这样与上一个色彩的差即是 --d 的间隔，也就是咱们管制虚线之间的间隔。

基于上述代码当初的界面是如下成果：

下面有提到 -webkit-mask-composite 是利用于一个元素的多个蒙幅员像合成显示，所以咱们这里须要在 mask 中再减少一个蒙板进行合成最终的成果。

减少以下代码到 mask 中：

linear-gradient(#0000 0 0) content-box

留神这里应用了 content-box 作为背景盒模型，这意味着背景色彩只会利用到元素的内容区域，这段代码将创立一个只在元素 内容区域 的程度线性突变背景，且是齐全通明的背景色。

为什么是内容区域，因为这里和 padding 有关联，咱们将定义的管制虚线的粗细 --t:5px; 利用到了伪元素的 padding 中。

padding: var(--t);

这样刚刚新增的通明背景就只会利用到下图的蓝色内容区域，再联合 -webkit-mask-composite，即` 只剩下 padding` 局部的内容，也就是咱们的自定义边框局部。

减少以下代码：

-webkit-mask-composite: source-in;

即是最终的成果，因为这里减少的 mask 背景是通明色，这里 -webkit-mask-composite 的属性不限度应用 source-in，其余的好几个都是一样的成果，有趣味的能够理解理解。

都曾经到这一步了，是不是应该再减少一些成果呢，给这个圆形的边框减少动起来的成果看看，减少一个简略的旋转动画 animation: rotate 5s linear infinite;，这样看着是不是更有感觉，实用的场景就多了。

码上掘金在线预览：
https://code.juejin.cn/pen/7231427066804535352

最初

到此整体代码实现就完结了，看完是不是感觉挺简略的，基于伪元素设置锥形突变 repeating-conic-gradient并配合 -webkit-mask-composite 实现自定义圆形虚线边框的成果。这里是设置了 border-radius:50%; 圆角最终出现的是圆形，有趣味的能够更改 CSS 代码试试其余的形态色彩间距等。

看完本文如果感觉有用，记得点个赞反对，珍藏起来说不定哪天就用上啦～

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）

参考

https://codepen.io/t_afif/pen/KKvjjZN

退出移动版