保持相同的嵌套边界曲率。

我在一些网站上经常看到的一个常见错误，特别是在前端初学者中，他们使用内部边界半径与外部边界半径相同，变成了这样的东西。

inner radius = outer radius

正如我们看到的那样非常糟糕，我们可以通过使用一点数学来解决这个问题，内半径等于外半径减去填充。

inner radius = outer radius - padding

创建简单的嵌套边框

让我们创建一个新的“index.html”文件，然后我们可以为边框放置一个基本的 HTML。

 <div class='container'>  
 <div class='background'>  
 <div class='background-child'>  
 </div>  
 </div>  
 </div>

还有一个新文件“styles.css”，我们可以在其中设置元素的样式。

 身体 {  
 边距：0；  
 填充：0；  
 box-sizing：边框框；  
 } ：根 {  
 --背景边框半径：24px；  
 --背景填充：10px；  
 } 。容器 {  
 背景颜色：#ecf0f1；  
 高度：100vh；  
 显示：弯曲；  
 证明内容：中心；  
 对齐项目：居中；  
 } 。背景 {  
 背景颜色：#3498db；  
 高度：250px；  
 宽度：250px；  
 填充：var（--背景填充）；  
 边界半径：var（--background-border-radius）；  
 } .background-child {  
 背景颜色：#ecf0f1；  
 高度：100%；  
 宽度：100%；  
 边界半径： calc(var(--background-border-radius) -  
 var(--background-padding));  
 }