Never Gonna Give You Up 
效果图对比
开始动手
起初，我以为这东西没啥难度，随便弄下就行了 结果水平受限，还是碰壁了~
最开始想的是直接mask把四周遮罩掉，好是好，就是不那么好！用来做单纯背景还行，加上边框后，事情开始不对劲了 于是只能pass。
绘图大法
既然传统路走不通，那只能开启绘图大法了~
第一步，老传统了，分析能否拆解。很明显，我们这里有相同规律的内容，四个角都是相似的，就是一个圆被分成了四块，那直接干！
background: radial-gradient(
var(--r) at var(--r) var(--r),
transparent calc(98% - var(--w)),
#f00 calc(100% - var(--w)) 98%,
transparent
)
calc(var(--r) * -1) calc(var(--r) * -1) / 100% 100%
剩下的就简单多了，把四周闭合就行了
linear-gradient(#f00, #f00) calc(var(--r) - 1px) 0 /
calc(100% - var(--r) * 2 + 2px) var(--w) no-repeat,
linear-gradient(#f00, #f00) calc(var(--r) - 1px) 100% /
calc(100% - var(--r) * 2 + 2px) var(--w) no-repeat,
linear-gradient(#f00, #f00) 0 calc(var(--r) - 1px) / var(--w)
calc(100% - var(--r) * 2 + 2px) no-repeat,
linear-gradient(#f00, #f00) 100% calc(var(--r) - 1px) / var(--w)
calc(100% - var(--r) * 2 + 2px) no-repeat
将它们组合起来，不就是一个完整的么！真是amazing！
这种拆分组合的在 一个奇奇怪怪的边框实现 中也使用到了，你发现了吗？ 
双重边框
最复杂的内凹边框我们已经完成，接下来第二层规规矩矩的边框就简单多了！
这里大鹅提供两种方法实现：1）伪元素； 2）outline
伪元素
这也是最直接想到的办法，使用伪元素重新绘制一个相同比例的小矩形，再加上边框即可
&::after {
content: "";
position: absolute;
inset: 5px;
border: var(--w) solid var(--c);
}
这里的 inset 一下子就能完成收缩，要记得常用哦！这个方法没啥好讲的，一看就会！
outline
outline，顾名思义就是一个外轮廓，outline 方法比传统的伪元素还简单直接
outline: 2px solid var(--c);
outline-offset: -7px;
配合 outline-offset 即可实现缩进，负数向内，正数向外。它还不占用空间哦！
主要知识点就是这么多，是不是很简单！
放两个源码，自行对比下
你可以在这里找到大鹅所有CSS知识分享哦
🔥【冷门知识】鹅のCSS大合集！长期追更~ 收藏 ≈ 学会
