ToB企服应用市场:ToB评测及商务社交产业平台

标题: 巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框 [打印本页]
作者: 南七星之家    时间: 2025-2-14 19:17
标题: 巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框
在之前，我们有些过这么一篇文章 - 利用 CSS 轻松实现高频出现的各类奇形怪状按钮。
里面包含了如下这些图形：

你可以在这里看到：CodePen Demo -- CSS Various Button Shapes | CSS 各种造型按钮
接下来几篇文章中，将在上述底子上，额外增补一些在日常设计稿中，常见的，大概出现的更为复杂的几个按钮，本文，我们来尝试实现这个造型：

不镂空的内凹圆角按钮

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

此造型如果内部无需镂空，整体照旧比力简单的，利用 background: radial-gradient() 径向渐变或者 mask，都能比力轻松的实现。
我们快速回顾一下，看这样一个简单的例子：
  1. [/code][code]div {
  2.     background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 12px);
  3. }
复制代码
可以得到这样一个图形：

所以，只需控制下 background-size，在 4 个角实现 4 个这样的图形即可：
  1. inset-circle
复制代码
  1. &.inset-circle {
  2.     background-size: 70% 70%;
  3.     background-image: radial-gradient(
  4.             circle at 100% 100%,
  5.             transparent 0,
  6.             transparent 12px,
  7.             #2179f5 13px
  8.         ),
  9.         radial-gradient(
  10.             circle at 0 0,
  11.             transparent 0,
  12.             transparent 12px,
  13.             #2179f5 13px
  14.         ),
  15.         radial-gradient(
  16.             circle at 100% 0,
  17.             transparent 0,
  18.             transparent 12px,
  19.             #2179f5 13px
  20.         ),
  21.         radial-gradient(
  22.             circle at 0 100%,
  23.             transparent 0,
  24.             transparent 12px,
  25.             #2179f5 13px
  26.         );
  27.     background-repeat: no-repeat;
  28.     background-position: right bottom, left top, right top, left bottom;
  29. }
复制代码

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

如果背景色要求渐变怎么办呢？
假设我们有一张矩形背景图案，我们只必要利用 mask 实现一层遮罩，利用 mask 的特性，把 4 个角给遮住即可。
mask 的代码和上述的圆角切角代码非常类似，简单改造下即可得到渐变的内切圆角按钮：
  1. inset-circle
复制代码
  1. .mask-inset-circle {
  2.     background: linear-gradient(45deg, #2179f5, #e91e63);
  3.     mask: radial-gradient(
  4.             circle at 100% 100%,
  5.             transparent 0,
  6.             transparent 12px,
  7.             #2179f5 13px
  8.         ),
  9.         radial-gradient(
  10.             circle at 0 0,
  11.             transparent 0,
  12.             transparent 12px,
  13.             #2179f5 13px
  14.         ),
  15.         radial-gradient(
  16.             circle at 100% 0,
  17.             transparent 0,
  18.             transparent 12px,
  19.             #2179f5 13px
  20.         ),
  21.         radial-gradient(
  22.             circle at 0 100%,
  23.             transparent 0,
  24.             transparent 12px,
  25.             #2179f5 13px
  26.         );
  27.     mask-repeat: no-repeat;
  28.     mask-position: right bottom, left top, right top, left bottom;
  29.     mask-size: 70% 70%;
  30. }
复制代码
这样，我们就得到了这样一个图形：

镂空的内凹圆角边框

但是，如果要求内部是整体镂空，只展示内凹圆角边框，整个复杂度一下就上来了。
上面的方法以及不适用了，原因在于很难利用 mask 制造一个不规则的内凹圆角形状举行裁剪，因此，我们必须另辟蹊径。
渐变偏移技巧

在 CSS 高阶小技巧 - 角向渐变的妙用！ 一文中，我们介绍了渐变一个非常故意思的偏移技巧：
举个例子，下面是角向渐变 conic-gradient() 的简单介绍：
  1. {
  2.     background: conic-gradient(deeppink, yellowgreen);
  3. }
复制代码
从渐变的圆心、渐变起始角度以及渐变方向上来说，是这样的：

划重点：
从图中可以看到，角向渐变的起始圆心点、起始角度和渐变方向为：
当然，我们也可以控制角向渐变的起始角度以及角向渐变的圆心。
稍微改一下上述代码：
  1. {
  2.     background: conic-gradient(from 270deg at 50px 50px, deeppink, yellowgreen);
  3. }
复制代码
结果如下：

我们改变了起始角度以及角向渐变的圆心：

了解了这个之后。我们基于上述的图形，重新绘制一个图形：
  1. div {
  2.     margin: auto;
  3.     width: 200px;
  4.     height: 200px;
  5.     background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent
  6. 360deg);
  7.     border: 1px solid #000;
  8. }
复制代码
结果如下：

起始角度以及角向渐变的圆心没有改变，但是只让前 90deg 的图形为粉色，而后 270deg 的图形，设置为了透明色。
我们利用角向渐变，在图像内部，又实现了一个小的矩形！
接下来，我们再给上述图形，增加一个 background-position: -25px, -25px：
  1. div {
  2.     margin: auto;
  3.     width: 200px;
  4.     height: 200px;
  5.     background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent
  6. 360deg);
  7.     background-position: -25px -25px;
  8.     border: 1px solid #000;
  9. }
复制代码
这样，我们就神奇的得到了这样一个图形：

为什么会有这样一种现象？如果我们在代码中参加 background-repeat: no-repeat：
  1. div {
  2.     width: 200px;
  3.     height: 200px;
  4.     background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent
  5. 360deg);
  6.     background-position: -25px -25px;
  7.     background-repeat: no-repeat;
  8.     border: 1px solid #000;
  9. }
复制代码
那么就只会剩下左上角一个角：

因此，这里实际上利用了渐变图形默认会 repeat 的特性，实际上是这么个意思：

明白了这张图，也就明白了整个技巧的焦点所在！
利用径向渐变实现圆环偏移

把握了上述渐变的偏移技巧后，我们将上述的角向渐变的案例，移植到径向渐变。
起首，我们利用径向渐变，实现一个小圆环：
  1. [/code][code]div {
  2.     width: 300px;
  3.     height: 120px;
  4.     border: 1px solid #ddd;
  5.     background: radial-gradient(30px at 30px 30px, transparent calc(98% - 5px),#000 calc(100% - 5px) 98%, transparent);
  6. }
复制代码
表明一下，上述渐变语句的含义是在 30px 30px 处，实现一个半径为 30px 的径向渐变，渐变颜色为透明到黑色到透明，因此可以得到一个圆环：

为了方便大家看清楚 div 整体巨细，利用 border: 1px solid #ddd 展示了整个 div 的轮廓，下图开始隐藏 border
然后，利用上述的技巧，我们让渐变图形，整体偏移 -30px -30px，也就是让径向渐变图形的圆心，处于div的左上角 0 0 坐标处。
  1. div {
  2.     width: 300px;
  3.     height: 120px;
  4.     border: 1px solid #ddd;
  5.     background: radial-gradient(30px at 30px 30px, transparent calc(98% - 5px),#000 calc(100% - 5px) 98%, transparent);
  6.     background-position: -30px -30px;
  7. }
复制代码
此时，图形就变成了这样（下图去掉了 border）：

到这，大家应该能恍然大悟了吧。剩下的工作就比力简单了，我们只必要利用多重线性渐变，把剩余的线条增补出来即可，整个图形完整的代码如下：
  1. div {
  2.     width: 300px;
  3.     height: 120px;
  4.     background:
  5.         radial-gradient(30px at 30px 30px, transparent calc(98% - 5px),#ff2287 calc(100% - 5px) 98%, transparent),
  6.         linear-gradient(#ff2287, #ff2287),
  7.         linear-gradient(#ff2287, #ff2287),
  8.         linear-gradient(#ff2287, #ff2287),
  9.         linear-gradient(#ff2287, #ff2287);
  10.     background-position:
  11.         -30px -30px,
  12.         29px 0, 29px 100%, // 两条横边
  13.         0 29px, 100% 29px; // 两条纵边
  14.     background-size:
  15.         100% 100%,
  16.         calc(100% - 58px) 5px, calc(100% - 58px) 5px,
  17.         5px calc(100% - 58px), 5px calc(100% - 58px);
  18.     background-repeat:
  19.         repeat,
  20.         no-repeat, no-repeat,
  21.         no-repeat, no-repeat;
  22. }   
复制代码
这样，我们就成功得到了我们想要的不镂空的内凹圆角边框：

当然，我们肯定是必要不同边框巨细、颜色的各种不镂空的内凹圆角边框，我们利用 CSS 变量再举行一下封装：
  1. .g-custom {   
  2.     background:
  3.         radial-gradient(var(--border_radius) at var(--border_radius) var(--border_radius), transparent calc(97% - var(--border_width)),var(--color) calc(100% - var(--border_width)) 98%, transparent),
  4.         linear-gradient(var(--color), var(--color)),
  5.         linear-gradient(var(--color), var(--color)),
  6.         linear-gradient(var(--color), var(--color)),
  7.         linear-gradient(var(--color), var(--color));
  8.     background-position:
  9.         calc(-1 * var(--border_radius)) calc(-1 * var(--border_radius)),
  10.         calc(var(--border_radius) - 1px) 0, calc(var(--border_radius) - 1px) 100%, // 两条横边
  11.         0 calc(var(--border_radius) - 1px), 100% calc(var(--border_radius) - 1px); // 两条纵边
  12.     background-size:
  13.         100% 100%,
  14.         calc(100% - calc(var(--border_radius) * 2 - 2px)) var(--border_width), calc(100% - calc(var(--border_radius) * 2 - 2px)) var(--border_width),
  15.         var(--border_width) calc(100% - calc(var(--border_radius) * 2 - 2px)), var(--border_width) calc(100% - calc(var(--border_radius) * 2 - 2px));
  16.     background-repeat:
  17.         repeat,
  18.         no-repeat, no-repeat,
  19.         no-repeat, no-repeat;
  20. }
  22. .g-custom-1 {
  23.     width: 200px;
  24.     height: 120px;
  25.     --color: #6678ff;
  26.     --border_radius: 15px;
  27.     --border_width: 1px;
  28. }
  30. .g-custom-2 {
  31.     width: 240px;
  32.     height: 160px;
  33.     --color: #448800;
  34.     --border_radius: 35px;
  35.     --border_width: 3px;
  36. }
  38. .g-custom-3 {
  39.     width: 180px;
  40.     height: 180px;
  41.     --color: #df73a0;
  42.     --border_radius: 40px;
  43.     --border_width: 6px;
  44. }
复制代码
这样，控制三个 CSS 变量，就可以得到各种不同样式的边框了：

完整的代码，你可以戳这里：CodePen Demo -- 内凹角边框 & inner-corner-border
怎么样，一个非常有技巧性的 CSS 图形，你 Get 到了吗？
末了


好了，本文到此结束，希望本文对你有所资助
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4