巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框

在之前，我们有些过这么一篇文章 - 使用 CSS 轻松实现高频出现的各类奇形怪状按钮。

里面包含了如下这些图形：

你可以在这里看到：CodePen Demo -- CSS Various Button Shapes | CSS 各种造型按钮

接下来几篇文章中，将在上述基础上，额外补充一些在日常设计稿中，常见的，可能出现的更为复杂的几个按钮，本文，我们来尝试实现这个造型：

不镂空的内凹圆角按钮

在文章开头的贴图中，其实是有和这个按钮非常类似的造型：

此造型如果内部无需镂空，整体还是比较简单的，利用background: radial-gradient()径向渐变或者mask，都能比较轻松的实现。

我们快速回顾一下，看这样一个简单的例子：

<div></div>

div { background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 12px); }

可以得到这样一个图形：

所以，只需控制下background-size，在 4 个角实现 4 个这样的图形即可：

<div class="inset-circle">inset-circle</div>

&.inset-circle { background-size: 70% 70%; background-image: radial-gradient( circle at 100% 100%, transparent 0, transparent 12px, #2179f5 13px ), radial-gradient( circle at 0 0, transparent 0, transparent 12px, #2179f5 13px ), radial-gradient( circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px ), radial-gradient( circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px ); background-repeat: no-repeat; background-position: right bottom, left top, right top, left bottom; }

借助 mask 实现渐变的内切圆角按钮

如果背景色要求渐变怎么办呢？

假设我们有一张矩形背景图案，我们只需要使用mask实现一层遮罩，利用mask的特性，把 4 个角给遮住即可。

mask的代码和上述的圆角切角代码非常类似，简单改造下即可得到渐变的内切圆角按钮：

<div class="mask-inset-circle">inset-circle</div>

.mask-inset-circle { background: linear-gradient(45deg, #2179f5, #e91e63); mask: radial-gradient( circle at 100% 100%, transparent 0, transparent 12px, #2179f5 13px ), radial-gradient( circle at 0 0, transparent 0, transparent 12px, #2179f5 13px ), radial-gradient( circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px ), radial-gradient( circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px ); mask-repeat: no-repeat; mask-position: right bottom, left top, right top, left bottom; mask-size: 70% 70%; }

这样，我们就得到了这样一个图形：

镂空的内凹圆角边框

但是，如果要求内部是整体镂空，只展示内凹圆角边框，整个复杂度一下就上来了。

上面的方法以及不适用了，原因在于很难利用mask制造一个不规则的内凹圆角形状进行裁剪，因此，我们必须另辟蹊径。

渐变偏移技巧

在 CSS 高阶小技巧 - 角向渐变的妙用！ 一文中，我们介绍了渐变一个非常有意思的偏移技巧：

举个例子，下面是角向渐变conic-gradient()的简单介绍：

{ background: conic-gradient(deeppink, yellowgreen); }

从渐变的圆心、渐变起始角度以及渐变方向上来说，是这样的：

划重点：

从图中可以看到，角向渐变的起始圆心点、起始角度和渐变方向为：

1. 起始点是图形中心，
2. 默认渐变角度 0deg 是从上方垂直于圆心的
3. 渐变方向以顺时针方向绕中心实现

当然，我们也可以控制角向渐变的起始角度以及角向渐变的圆心。

稍微改一下上述代码：

{ background: conic-gradient(from 270deg at 50px 50px, deeppink, yellowgreen); }

效果如下：