如何实现边框内圆角

实现效果如下：

对于上述效果，我们可以用两个嵌套的div实现，如下：

<div class="test-wrap">
    <div></div>
</div>

div{
    width: 180px;
    height: 100px;
}
.test-wrap{
    background: red;
    padding: 10px;
}
.test-wrap > div{
    background: green;
    border-radius: 10px;
}

那么我们如何用一个div实现上述简单的效果呢？
我们可以利用outline和box-shadow来实现这个简单的效果。
首先outline并不会跟着元素的圆角走，但是box-shadow会，这样把两者叠加在一起，box-shadow刚好可以用来填充outline和元素圆角之间的空隙，这样刚好达到我们的预期。

<div class="test-wrap"></div>

div{
    width: 180px;
    height: 100px;
}
.test-wrap{
    background: red;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 0 10px green;
    outline: 10px solid green;
}

此处要注意一点，box-shadow指定的值并不一定定于outline的宽度，可能太小也可能太大，那么什么样的值是最合适的呢？
看下图：

我们可以利用勾股定理来计算适合的大小，如下图：

从上图我们可以看出，box-shadow的宽短为sqrt(2)*R-R=(sqrt(2)-1)R,它的取值范围为(sqrt(2)-1)R < box-shadow宽度 < outline宽度
可以看出，outline的宽度必须要大于box-shadow，否则将无法达到预期的效果。