利用径向渐变实现圆环偏移

掌握了上述渐变的偏移技巧后我们将上述的角向渐变的案例移植到径向渐变。首先我们利用径向渐变实现一个小圆环div/divdiv { width: 300px; height: 120px; border: 1px solid #ddd; background: radial-gradient(30px at 30px 30px, transparent calc(98% - 5px),#000 calc(100% - 5px) 98%, transparent); }解释一下上述渐变语句的含义是在30px 30px处实现一个半径为30px的径向渐变渐变颜色为透明到黑色到透明因此可以得到一个圆环为了方便大家看清楚 div 整体大小利用border: 1px solid #ddd展示了整个 div 的轮廓下图开始隐藏 border然后利用上述的技巧我们让渐变图形整体偏移-30px -30px也就是让径向渐变图形的圆心处于div的左上角0 0坐标处。div { width: 300px; height: 120px; border: 1px solid #ddd; background: radial-gradient(30px at 30px 30px, transparent calc(98% - 5px),#000 calc(100% - 5px) 98%, transparent); background-position: -30px -30px; }此时图形就变成了这样下图去掉了 border到这大家应该能恍然大悟了吧。剩下的工作就比较简单了我们只需要利用多重线性渐变把剩余的线条补充出来即可整个图形完整的代码如下div { width: 300px; height: 120px; background: radial-gradient(30px at 30px 30px, transparent calc(98% - 5px),#ff2287 calc(100% - 5px) 98%, transparent), linear-gradient(#ff2287, #ff2287), linear-gradient(#ff2287, #ff2287), linear-gradient(#ff2287, #ff2287), linear-gradient(#ff2287, #ff2287); background-position: -30px -30px, 29px 0, 29px 100%, // 两条横边 0 29px, 100% 29px; // 两条纵边 background-size: 100% 100%, calc(100% - 58px) 5px, calc(100% - 58px) 5px, 5px calc(100% - 58px), 5px calc(100% - 58px); background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; }这样我们就成功得到了我们想要的不镂空的内凹圆角边框当然我们肯定是需要不同边框大小、颜色的各种不镂空的内凹圆角边框我们利用 CSS 变量再进行一下封装.g-custom { background: 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), linear-gradient(var(--color), var(--color)), linear-gradient(var(--color), var(--color)), linear-gradient(var(--color), var(--color)), linear-gradient(var(--color), var(--color)); background-position: calc(-1 * var(--border_radius)) calc(-1 * var(--border_radius)), calc(var(--border_radius) - 1px) 0, calc(var(--border_radius) - 1px) 100%, // 两条横边 0 calc(var(--border_radius) - 1px), 100% calc(var(--border_radius) - 1px); // 两条纵边 background-size: 100% 100%, calc(100% - calc(var(--border_radius) * 2 - 2px)) var(--border_width), calc(100% - calc(var(--border_radius) * 2 - 2px)) var(--border_width), var(--border_width) calc(100% - calc(var(--border_radius) * 2 - 2px)), var(--border_width) calc(100% - calc(var(--border_radius) * 2 - 2px)); background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; } .g-custom-1 { width: 200px; height: 120px; --color: #6678ff; --border_radius: 15px; --border_width: 1px; } .g-custom-2 { width: 240px; height: 160px; --color: #448800; --border_radius: 35px; --border_width: 3px; } .g-custom-3 { width: 180px; height: 180px; --color: #df73a0; --border_radius: 40px; --border_width: 6px; }这样控制三个 CSS 变量就可以得到各种不同样式的边框了完整的代码你可以戳这里CodePen Demo -- 内凹角边框 inner-corner-border怎么样一个非常有技巧性的 CSS 图形你 Get 到了吗