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

    一个容器 只有在内侧有圆角,而边框或描边的四个角在外部任然保持直角的形状 如图1所示

    1. .something-meaningful {
    2. background: #655;
    3. padding: .8em;
    4. }
    5. .something-meaningful > div {
    6. background: tan;
    7. border-radius: .8em;
    8. padding: 1em;
    9. }
    10. <div class="something-meaningful"><div>
    11. I have a nice subtle inner rounding,
    12. don't I look pretty?
    13. </div></div>
    1. 1

    image.png

    这个方法很好,但要求我们使用两个元素,而我们只需要一个元素。有 没有办法可以只用一个元素达成同样的效果