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

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

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

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

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

不镂空的内凹圆角按钮

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

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

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

登录后复制

<div></div>

• 1.

登录后复制

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

• 1.
• 2.
• 3.

可以得到这样一个图形：

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

登录后复制

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

• 1.

登录后复制

&.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 12p