有时我们需要一个容器,只在内侧有圆角,而边框或描边的四个角在外 部仍然保持直角的形状,如图 1所示。这是一个有趣的效果,目前还没 有被滥用。用两个元素可以实现这个效果,这并没有什么特别的
一个容器 只有在内侧有圆角,而边框或描边的四个角在外部任然保持直角的形状 如图1所示
.something-meaningful {
background: #655;
padding: .8em;
}
.something-meaningful > div {
background: tan;
border-radius: .8em;
padding: 1em;
}
<div class="something-meaningful"><div>
I have a nice subtle inner rounding,
don't I look pretty?
</div></div>
图1
这个方法很好,但要求我们使用两个元素,而我们只需要一个元素。有 没有办法可以只用一个元素达成同样的效果