CSS等比缩放div圆角

本文介绍了一种无需修改HTML结构，即可实现div元素的`border-radius`与其宽度等比例缩放的CSS技巧。通过巧妙运用CSS百分比单位，特别是`border-radius: 50%`，可以使div的圆角半径始终与宽度保持一致，即使调整宽度，也能维持2:1的宽高比和完美的圆角效果。该方法简单高效，避免了繁琐的HTML修改，适合需要动态调整圆角大小的场景。 关键词：border-radius, 等比例缩放, CSS, 百分比, div圆角, HTML结构不变

巧妙实现div的border-radius与宽度等比例缩放，无需修改HTML结构

现有HTML结构如下：

.flex-border-radius {
  border-radius: 50% / 100%; /* 或简写为 50% */
}

这里，border-radius: 50% 表示水平和垂直方向的圆角半径都为宽度的50%，从而实现完美的圆形效果。如果需要椭圆形，可以调整百分比数值。 由于宽度和高度始终保持2:1比例，因此border-radius的调整将与宽度成比例变化。 这种方法无需修改HTML，即可实现动态的等比例缩放效果。

今天关于《CSS等比缩放div圆角》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！