設計場景
- 一個元素，只在內側有圓角，而邊框或描邊的四個角在外部仍然保持直角顯示
老式解決方案
- 結構
<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》
