如何實現邊框內圓角

實現效果如下：

對於上述效果，我們可以用兩個嵌套的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，否則將無法達到預期的效果。