背景与边框之“边框内圆角”

设计场景

• 一个元素，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角显示

老式解决方案

• 结构

<div class="box">
    <div class="box-inner">
        <!-- 内容圆角 -->
    </div>
</div>

• 风格

 .box {
    background-color: #655;
    padding: 8px;
}
.box-inner {
    border-radius: 4px;
    background-color: #fafafa;
    padding: 4px;
}

说明：这个方法很好，但需要二层结构

新式解决方案

• 结构

<div class="box">
    <!-- 内容圆角 -->
</div>

• 风格

 .box {
    padding: 8px; 
    background-color: #fafafa; 
    outline: 8px solid #655;           
    box-shadow: 0 0 0 8px #655;
    border-radius: 4px;
}

优化：一层结构
说明：在《背景与边框之“多层边框”》 一文中，我们有提到过：描边不会受 border-radius 的影响，而 box-shadow 却会，因此两者叠加，用投影边框来填充描边和容器圆角之间的空隙

《CSS SECRETS》