在不修改 HTML 结构的前提下,如何得到一个 border-radius 随宽高变化同等等比例变化的 div

大胡子民工潘半仙
  • 4.8k

已知 HTML 结构如下:

<div class="flex-border-radius"></div>

样式如下:

.flex-border-radius {
  margin: 100px;
  width: 400px;
  height: 200px;
  border: 1px solid #345;
}

它的 widthheight 永远保持 2:1,现在的需求是,当 width400px 时,它的 border-radius20px,当 width 改变时, border-radius 按同等比例改变。

回复
阅读 263
1 个回答

等比例的话直接用这种方式就可以了

border-radius: 10%/20%

image.png

你知道吗?

宣传栏