3

检查此代码

div {
  width: 160px;
  height: 90px;
  background-color: gold;
  border: solid red;
  border-width: calc(90px / 3) 0;
  box-sizing: border-box;
}

#one {
  -webkit-clip-path: circle(calc(100% / 2 / 16 * 9) at 50% 50%);
          clip-path: circle(calc(100% / 2 / 16 * 9) at 50% 50%);
}

#two {
  -webkit-clip-path: circle(calc(160px / 2 / 16 * 9) at 50% 50%);
          clip-path: circle(calc(160px / 2 / 16 * 9) at 50% 50%);
}
<div id="one"></div>
<div id="two"></div>

第一个 div 有
clip-path: circle(calc(100% / 2 / 16 * 9) at 50% 50%);，第二个有
clip-path: circle(calc(160px / 2 / 16 * 9) at 50% 50%);

该计算基于 16:9 的 div 的纵横比。我想让圆形剪辑路径的半径为高度的一半，但不知道确切的像素宽度。由于100%通常指的是宽度，我想，这里应该是一样的，但事实并非如此。

现在 160 像素是两个 div 的宽度。我期望的是两个剪辑路径圆的半径相同。
计算出的半径约为短的 1.23 倍。

4

0 回答 0