需求：元素边框内侧的四个角为圆角，形成内圆角的效果。

想法一

这个需求主要分为两部分，边框和圆角。实现边框跟圆角并不困难，只要使用border以及border-radius属性即可：

代码1

border: 10px solid #67C23A;  
border-radius: 10px;

实现效果如下：

image.png

我们可以看到，最终实现的是外圆角内直角的效果，因为在设置 border-radius 的时候，是算上边框的。

想法二

在多重边框这篇文章中提到过 outline，那我们是否可以通过 outline 以及 border-radius 的方式来实现这个效果呢：

代码2

outline: 10px solid #67C23A;  
border-radius: 10px;

具体效果如下所示：

image.png

实际效果距离我们的预期已经非常接近了，可是在元素的四个角还存在白色的空隙，那该怎么填上呢？答案是box-shadow! 我们可以利用它来实现这个效果：

代码3

outline: 10px solid #67C23A;  
border-radius: 10px;  
box-shadow 0 0 0 4px #67C23A

最后的效果如下所示：

image.png

那这个偏移量我们要设置多少合适呢？其实计算也非常简单。四个内圆角其实就是4个1/4圆:
image.png

通过勾股定理可以求得 L = √2R ，box-shadow 需要设置的偏移量为 L - R = (√2 - 1) * R，其中，R 是 border-radius 的值。所以在上述例子中，偏移量的距离大概为：0.414 * 10 = 4px。