邊框內圓角
背景知識：box-shadow，outline，“多重邊框”
一、兩個div嵌套
兩個div實現內圓角很容易，只需要內圓角外直角即可。
div First Try
.box{
width: 200px;
padding: 20px;
background-color: #655;
}
.content{
background-color: tan;
border-radius: .8em;
padding: 20px;
}
這種方案更加靈活，我們可以在box上設置更多的樣式，但是需要兩個元素才能實現。
二、box-shadow + outline 方案
還記得上篇中，outline和box-shadow對於圓角的區別顯示嗎？box-shadow會貼合border的圓角，outline不會。當我們僅需要實現一個實色的邊框加內圓角，使用這個方案可以達到相同的效果。
box-shadow + outline First Try
width: 160px;
background: tan;
border-radius: .8em;
padding: 20px;
margin: 20px;
box-shadow: 0px 0px 0px .4em #655;
outline: 20px solid #655;
這種方案中，box-shadow是用來填補outline和border之間的間隙的，如果不加box-shadow效果會是這樣的。
-
所以我們需要設置
box-shadow的擴散半徑來彌補四個類似三角形的空隙。 -
至於擴散半徑的大小，我們可以用勾股定理設置。
-
也就是
border-radius的圓角圓心到角的距離 - 半徑。 -
(√2 - 1)r；√2 ≈ 1.4那麼(√2 - 1)也就是在0.4 - 0.5之間,我們可以按0.5計算即可。也就是0.5r。 -
最後再回顧一下
box-shadow的用法，outline和border用法一樣，同時可以使用outline-offset: -30px;調整位置。
/* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */
box-shadow: 2px 2px 2px .4em #655;
說起這個有人會說，爲什麼不用outline-offset:-10px;這樣來頂替box-shadow呢？試一下就知道了。outline的顯示層級較border更高，所以border的圓角會被覆蓋掉。
最終案例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
padding: 20px;
background-color: #655;
}
.content{
background-color: tan;
border-radius: .8em;
padding: 20px;
}
.box2 {
width: 160px;
background: tan;
border-radius: .8em;
padding: 20px;
margin: 20px;
box-shadow: 0px 0px 0px .4em #655;
outline: 20px solid #655;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
對酒當歌，人生幾何。
</div>
</div>
<hr>
<hr>
<hr>
<div class="box2">
對酒當歌，人生幾何。
</div>
</body>
</html>