先上個圖看看效果
紫色邊框外面是直角氢伟，內(nèi)部是圓角。要做出這個效果钩乍，首先要知道box-shadow 和 outline 的使用方法呼猪。box-shadow 和 outline 的使用方法在我的簡書《CSS多重邊框》里面有記錄画畅。http://www.reibang.com/p/a6333147dff5
我做出這種效果有2個方法。
方法一：
用2個div嵌套實(shí)現(xiàn)宋距。
HTML代碼：
<div class="parent">
<div></div>
</div>
CSS代碼：
.parent {
width: 300px;
height: 300px;
background: #669;
display: flex;
justify-content: center;
align-items: center;
}
.parent > div {
width: 280px;
height: 280px;
border-radius: 20px;
background: #6cc;
}
注意：
要實(shí)現(xiàn)內(nèi)層div的居中效果轴踱。
這里用了彈性盒子（class="parent"的div中css加粗部分）的方法來實(shí)現(xiàn)。
缺點(diǎn)：
要用2個元素來實(shí)現(xiàn)谚赎。嵌套層次加多淫僻。
方法二：
利用 box-shadow 和 outline
HTML代碼：
<div></div>
CSS代碼：
div{
width: 300px;
height: 300px;
background: #6cc;
border-radius: 30px;
box-shadow: 0 0 0 15px #669;
outline: 15px solid #669;
}
詳解
首先要設(shè)置div的邊框?yàn)閳A角邊框，用border-radius設(shè)置壶唤。
在【CSS】多重邊框（box-shadow雳灵、outline）里面講到，如果元素設(shè)置了圓角邊框闸盔，再設(shè)置outline是會出現(xiàn)四角漏空的現(xiàn)象的悯辙。
而設(shè)置了圓角，然后再用 box-shadow 設(shè)置外邊框迎吵，則最外層的四角就不是90°了躲撰。
所以要用 box-shadow 和 outline 配合使用。
但在這個方法中钓觉，如果 outline 的值不夠大茴肥，box-shadow 在填充空隙的時候就會超出 outline 設(shè)定的界限。如下圖所示
所以 outline 的值不能太小荡灾，同時要計算縫隙的值
利用勾股定理計算出空隙的長度
空隙的長度為 (r√2)-r瓤狐，即 r（√2 - 1）。而 √2 - 1 < 0.5 批幌，所以設(shè)置 box-shadow 的大小可以為圓角半斤（border-radius）的一半础锐。
這里的 “ r ” 指的是border-radius的大小。
總結(jié)：
在用這個方法制作內(nèi)圓角的時候荧缘，
box-shadow 的值是 border-radius 的一半皆警，即 box-shadow = border-radius / 2
同時，outline 要 大于等于 box-shadow 截粗。
缺點(diǎn)：
此方法在使用過程中要進(jìn)行各種計算信姓。
限制：
box-shadow 小于等于 outline ，同時 box-shadow 又要比 r（√2 - 1）大绸罗。
這里的 “ r ” 指的是border-radius的大小意推。
