有时，会有内侧圆角，外侧直角的需求，如下：
可以简单的使用两个元素实现：
<div class="something-meaningful">
<div>
文字信息
</div>
</div>
<style>
.something-meaningful {
background: #655;
}
.something-meaningful > div {
background: tan;
border-radius: 0.8em;
padding: 1em;
}
</style>
这个写法就需要使用两个元素，而我们如果只用一个元素，该如何达成这样的效果。
当然，上述的方法使用上，更加灵活，可以充分使用背景的能力，如果不想边框是纯色的，而是纹理样式，也可以使用渐变效果轻松实现。若只是需要实色的效果，还可以用另一种方式实现：
background: tan;
border-radius: 0.8em;
padding: 1em;
box-shadow: 0 0 0 0.6em #655;
outline: 0.6em solid #655;
这样可以达到上面同样的效果，这个实现原理是靠 outline 加外边，box-shadow 去填补空缺。也就是描边并不会跟着元素的圆角，因此会显示出直角，而 box-shadow 是会的。我们可以给投影和描边设置不一样的颜色，去看下效果：
如果仔细看，可以发现在描边层下的投影层已经扩散到了外面，就是投影指定一个等于描边宽度的扩张值，在某些浏览器下可能存在渲染异常，所以我们的需求只需要覆盖圆角产生的空隙即可。
那这个扩张值的大小多少，就需要我们去计算得到，简单说就是勾股定理去计算这个长度，假设圆角半径都为 1，那这个长度就是 (√2 - 1)，√2 就是圆角的圆心到原先左上角的距离，1 就是这个圆角的半径，那这里的长度就是 0.8 * (√2 - 1)，这个值计算出后需要往上取整（这里是 0.34 ），为了填补整个空隙。
box-shadow 设置的长度过小：
描边的宽度比 (√2 - 1)r 小：
ps：这个方法有个做大的限制就是，当描边的宽度比 (√2 - 1)r 小，那就根本不可能用这个方法来实现我们需要的效果了。从下图就可以看出来，当空隙过大，加的阴影可以遮挡这个空隙时，阴影早已经超出 outline 实现的描边宽度。
浙江大华技术股份有限公司-软研-智慧城市产品研发部招聘高级前端！！！！！ 欢迎大家来聊，有意向可发送简历到 chen_zhen@dahuatech.com，加入我们，可以一起进步，一起聚餐，一起旅游，让我们从世界村的小伙伴变成大华村的小伙伴。
