保持相同的嵌套边界曲率。
保持相同的嵌套边界曲率。
我在一些网站上经常看到的一个常见错误，特别是在前端初学者中，他们使用内部边界半径与外部边界半径相同，变成了这样的东西。
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));
}
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
