首先看看效果图:

CSS 实现盒子的内圆角

我们可以这样实现:

<div class="outer">
    <div class="inner">css 实现盒子的内圆角 </div>
</div>
.outer {
    background: #655;
    padding: .8em;
}
.outer > .inner {
    background: tan;
    border-radius: .8em;
    padding: 1em;
}

这样看起也没什么不妥,不过用了两个 div,不够简洁。我们来看看用一个 div 如何实现这样的效果。

我们使用 outline 来实现外围边框,使用 box-shadow 来填充圆角空隙,代码如下所示:

<div class="inner-rounding">css 实现盒子的内圆角 </div>
.inner-rounding {
    margin: 1em;
    padding: 1em;
    outline: .6em solid #655;
    box-shadow: 0 0 0 .4em #655;
    border-radius: .8em;
    background: tan;
}

其中 box-shadow 的第四个值为 border-radius 值的一半即可。

CSS 实现盒子的内圆角

上图是没有设置 box-shadow 的情况,由图可知,圆角空白出的长度为 Math.sqrt(2) r - r,即 (Math.sqrt(2) - 1) r,约等于 0.4142 r。而我们需要给 box-shadow 取一个比 0.4142 r 稍大的数才能覆盖掉全部的空白,为了便于记忆,就取 0.5 了,这里 border-radius 的值为 0.8em,所以 box-shadow 的值就取 0.4 即可。