inner rounding
1.png
看到这个图会怎么做？外面的框的尖的，里面的框的有弧度的
最简单的办法
一个div中嵌套一个div，外方内圆
<div class="something-meaningful">
<div>
I have a nice subtle inner rounding, don't I look pretty?
</div>
</div>
.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}
2.png
这种方法需要用到两个元素才能实现，如果一定要用一个元素呢？
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
border:.6em solid #655;
}
当我只使用border的时候，发现外面的框有了弧度，里面的框没有弧度。因为border-radius会改变border所以这里显然不能用border
3.png
因为border-radius不会影响outline，他总是尖的，所以尝试用outline
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
outline: .6em solid #655;
}
然而这里会有点小bug，因为outline都是直的 ，所以这里会跟content会有点缝隙，如何去解决呢，
4.png
这里可以用到box-shadow
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
box-shadow: 0 0 0 .6em #655;
outline: .6em solid #655;
}
使用box-shadow来填充缝隙
5.png
当然 这时候你会想到如果只用box-shadow会怎么样，
6.png
box-shadow会随着border-radius变化，填充在content外面。
