先上个图看看效果
紫色边框外面是直角，内部是圆角。要做出这个效果，首先要知道box-shadow 和 outline 的使用方法。box-shadow 和 outline 的使用方法在我的简书《CSS多重边框》里面有记录。http://www.jianshu.com/p/a6333147dff5
我做出这种效果有2个方法。
方法一：
用2个div嵌套实现。
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;
}
注意：
要实现内层div的居中效果。
这里用了弹性盒子（class="parent"的div中css加粗部分）的方法来实现。
缺点：
要用2个元素来实现。嵌套层次加多。
方法二：
利用 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;
}
详解
首先要设置div的边框为圆角边框，用border-radius设置。
在【CSS】多重边框（box-shadow、outline）里面讲到，如果元素设置了圆角边框，再设置outline是会出现四角漏空的现象的。
而设置了圆角，然后再用 box-shadow 设置外边框，则最外层的四角就不是90°了。
所以要用 box-shadow 和 outline 配合使用。
但在这个方法中，如果 outline 的值不够大，box-shadow 在填充空隙的时候就会超出 outline 设定的界限。如下图所示
所以 outline 的值不能太小，同时要计算缝隙的值
利用勾股定理计算出空隙的长度
空隙的长度为 (r√2)-r，即 r（√2 - 1）。而 √2 - 1 < 0.5 ，所以设置 box-shadow 的大小可以为圆角半斤（border-radius）的一半。
这里的 “ r ” 指的是border-radius的大小。
总结：
在用这个方法制作内圆角的时候，
box-shadow 的值是 border-radius 的一半，即 box-shadow = border-radius / 2
同时，outline 要 大于等于 box-shadow 。
缺点：
此方法在使用过程中要进行各种计算。
限制：
box-shadow 小于等于 outline ，同时 box-shadow 又要比 r（√2 - 1）大。
这里的 “ r ” 指的是border-radius的大小。
