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

里面包含了如下这些图形你可以在这里看到CodePen Demo -- CSS Various Button Shapes | CSS 各种造型按钮接下来几篇文章中将在上述基础上额外补充一些在日常设计稿中常见的可能出现的更为复杂的几个按钮本文我们来尝试实现这个造型不镂空的内凹圆角按钮在文章开头的贴图中其实是有和这个按钮非常类似的造型此造型如果内部无需镂空整体还是比较简单的利用background: radial-gradient()径向渐变或者mask都能比较轻松的实现。我们快速回顾一下看这样一个简单的例子div/divdiv { background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 12px); }可以得到这样一个图形所以只需控制下background-size在 4 个角实现 4 个这样的图形即可div classinset-circleinset-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 classmask-inset-circleinset-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); }从渐变的圆心、渐变起始角度以及渐变方向上来说是这样的划重点从图中可以看到角向渐变的起始圆心点、起始角度和渐变方向为起始点是图形中心默认渐变角度 0deg 是从上方垂直于圆心的渐变方向以顺时针方向绕中心实现当然我们也可以控制角向渐变的起始角度以及角向渐变的圆心。稍微改一下上述代码{ background: conic-gradient(from 270deg at 50px 50px, deeppink, yellowgreen); }效果如下我们改变了起始角度以及角向渐变的圆心了解了这个之后。我们基于上述的图形重新绘制一个图形div { margin: auto; width: 200px; height: 200px; background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 360deg); border: 1px solid #000; }效果如下起始角度以及角向渐变的圆心没有改变但是只让前 90deg 的图形为粉色而后 270deg 的图形设置为了透明色。我们利用角向渐变在图像内部又实现了一个小的矩形接下来我们再给上述图形增加一个background-position: -25px, -25pxdiv { margin: auto; width: 200px; height: 200px; background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 360deg); background-position: -25px -25px; border: 1px solid #000; }这样我们就神奇的得到了这样一个图形为什么会有这样一种现象如果我们在代码中加入background-repeat: no-repeatdiv { width: 200px; height: 200px; background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 360deg); background-position: -25px -25px; background-repeat: no-repeat; border: 1px solid #000; }那么就只会剩下左上角一个角因此这里实际上利用了渐变图形默认会 repeat 的特性实际上是这么个意思