css border-radius 怎么保持水平半径等于垂直半径

Question

现在有一个矩形框,高度小于宽度

   .half {
      border: 10px solid black;
      height: 200px;
      width: 400px;
      margin-left: 900px;
      border-radius: 55px;
      background: yellow;
    }

现在设置的是固定高度,垂直半径和水平半径都是55px,可以得到我要的效果,垂直方向上有一段110px长度的固定高度不参与倒圆角
但是现在这个矩形高度变为可变化的,而border-radius支持百分数,但是百分数相对的是边框的长度,水平半径相对的是水平边框的长度,垂直半径相对的是垂直边框的长度,使用calc(50% - 55px)，这样水平半径是不等于垂直半径的
现在的做法是使用js设置，能不能通过css也可以实现这个效果

Answer 1

在使用 border-radius 定义圆角时，如果圆角为正圆弧，则只需指定一组值；如果圆角为椭圆弧，就要指定两组值，其中第1组的值针对长轴（即盒子水平方向的轴），第2组的值针对短轴（即盒子垂直方向的轴）。

通过把短轴设置得小一些，可以使垂直方向的弧度变小。

.half {
  border: 10px solid black;
  height: 200px;
  width: 400px;
  border-radius: 25% / 10%;
  background: yellow;
}

参考：
codepen 上的圆角生成器
https://codepen.io/pmk/full/z...

Answer 2

border-radius: 50%;