css 世界之边框内圆角

需求

做一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状。

通俗做法

用两个元素来实现这个效果：

// css
.meaningful {
	width: 200px;
	background: #389e0d;
	padding: 0.8em;
}
.meaningful > div {
	background: #595959;
	border-radius: 1em;
	padding: 1em;
}
// html
<div class="meaningful">
	<div>我的边框内是圆角的</div>
</div>

缺陷：
使用了两个元素。
下面我们使用一个元素来达到这个效果：

采用 outline 与 box-shadow

实际上是利用 box-shadow 会跟着元素的圆角走，而描边 outline 不会跟着元素的圆角走。
因此，如果我们把这两者叠加到一起， box-shadow 会刚好填补描边和容器圆角之间的空隙。
即:

// css
.meaningful {
	width: 200px;
	background: #595959;
	border-radius: 0.8em;
	padding: 1em;
	box-shadow: 0 0 0 0.6em #389e0d;
	outline: 0.6em solid #389e0d;
}
// html
<div class="meaningful">我的边框内是圆角的</div>

但在新版本谷歌浏览器下显示为：

这是由于描边也跟着圆角走，

所以要实现边框内圆角的效果还是采用方法一：采用两个元素比较稳妥。