边框内圆角

有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状，如图1所示。用两个元素可以实现这个效果，并没有特别的。

图1

.div1{
    background: #655;
    padding: .8em;
}
.div2{
    background: tan;
    border-radius: .8em;
    padding: 1em;
}
<div class="div1">
    <div class="div2">
        ddddddddddddd
    </div>
</div>

解决方案：

若用一个元素达到此目的，刚好出现图1的效果。

.test {
    width: 200px;
    height: 100px;
    background:tan;
    border-radius: .8em;
    padding: 1em;
    box-shadow: 0 0 0 .5em #655;
    outline: .5em solid #655;
    margin: 0 auto;

}

原因1：描边（outline属性）不会跟着元素的圆角走（因而显示的是直角），而box-shadow会刚好填补描边和容器圆角之间的空隙，图2更好的说明了两者的关系，这两者结合达成了我们想要的效果。

图2

而多大的投影扩张值可以填补这些空隙呢？ 需要勾股定理