设计场景
- 一个元素，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角显示
老式解决方案
- 结构
<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》
