有时候我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状
用两个元素嵌套很容易实现这个效果：
我们基本受益于两个事实，描边（outline）并不会跟着元素的圆角走（因而显示出直角），但是 box-shadow 却是会的。因此，如果我们把这两者叠加到一起，box-shadow 会刚好填补描边和容器圆角之间的空隙。
事实上，指定一个等于描边宽度的扩张值可能会得到异常渲染（目前在 chrome 71 中也是一样，以上 demo 仔细看），因此推荐一个更小的值，那么，这个值是？
事实上，我们需要满足 \((\sqrt2-1)*r\)（r 表示 border-radius）< 扩张半径（box-shadow） < 描边宽度（outline）（但是，扩张半径需要比描边宽度至少小多少呢？我测试了下，可能并没有准确的答案），这意味着，如果描边的宽度比 \((\sqrt2-1)*r\) 小，那我们是不可能用这个方法达成效果。\((\sqrt2-1)\) 约等于 0.414，如果可以的话，我们可以将扩张半径取值为 border-radius 的一半。
我们再次强调一遍，该方案的实现完全依赖于 描边不跟着圆角走这个事实，但是未来的 CSS 规范明确地建议描边跟着圆角走，我们拭目以待