clip-path:circle() 半径似乎没有正确计算

Question

每当我尝试使用 CSS circle() 函数进行一些剪辑时，我一直困扰着我：

.red {
  	width: 200px;
        height: 300px;
        background: red;
        border: 2px solid black;
        clip-path: circle(69%);  /*barely cuts off the corners of the .red div */
}

/*  the full circle will enclose the entire box at around 71% or (sqrt(2)/2 * 100%)
 per Mozilla documentation and not at 100% as one might expect */

<div class='red'></div>

似乎从来没有像我期望的那样计算半径。在查看 Mozilla MDN 参考 (https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape) 后，他们似乎按如下方式计算：

这对我来说似乎不正确。我想他们会计算包围元素矩形（div、img 等）的圆周半径，如下所示：

但情况似乎并非如此。任何人都可以对此有所了解。这是某种错误还是我只是不理解这里的东西？

Answer 1

它的定义是这样的，他们从来没有打算计算你所显示的半径。也是in the specification。

为了更好地理解，让我们考虑一个正方形。如果您将50% 视为价值，您可以拥有一个完美的圆圈

.red {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: circle(50%);
  border:2px solid;
  box-sizing:border-box;
}

<div class='red'></div>

背后的思路是考虑下图：

R 是您正在计算的“c”（绿线），r 是使用的参考（紫色线）。你可以很容易地看到r = R/sqrt(2) 和R = sqrt(w² + h²)。将两者结合起来会得到：

r = sqrt(w² + h²)/sqrt(2)

您在 MDN 页面中看到的公式是什么。

在正方形内使用此值的50% 将为我们提供逻辑圆：

 r/2 = sqrt(w² + h²)/(2*sqrt(2)) = sqrt(2*w²)/(2*sqrt(2)) = w/2 (or h/2)

要覆盖整个正方形，我们需要一个等于R/2 的值，即r/sqrt(2) = r/1.41，因为r 是100%，您将拥有您发现的71%

.red {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: circle(calc(100% / 1.44)); /* a little bogger  than 1.4 to better see*/
  border:2px solid;
  box-sizing:border-box;
}

<div class='red'></div>

同样的逻辑适用于宽度和高度不同但参考保持不变的非正方形形状：

r = sqrt(w² + h²)/sqrt(2)

---

从上面我们可以得出结论，71% 是一个神奇的值，无论形状如何，它都会产生相同的输出，因为它依赖于包围元素矩形的圆周半径，而 50%（或任何其他值） ) 会给出不同的结果：

.red {
  width: 200px;
  height: 200px;
  background: red;
  box-shadow:0 0 0 100px yellow;
  display:inline-block;
  clip-path: circle(71%); 
  margin: 70px;
}

<div class='red'></div>
<div class='red' style="width:300px;"></div>
<div class='red' style="width:100px;"></div>
<div class='red' style="width:50px;"></div>

使用50%

.red {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: circle(50%); 
  border:2px solid;
  box-sizing:border-box;
}

<div class='red'></div>
<div class='red' style="width:300px;"></div>
<div class='red' style="width:100px;"></div>
<div class='red' style="width:50px;"></div>

我们也可能认为任何大于71% 的值都是无用的，因为我们总是会给出一个比我们的元素更大的圆。这是真的，但我们不应该忘记我们也有这个职位。

使用100%、200%甚至300%的输出示例！

.red {
  width: 200px;
  height: 200px;
  background: red;
  border:2px solid;
  box-sizing:border-box;
}

<div class='red' style="clip-path: circle(100% at  0    50%)"></div>

<div class='red' style="clip-path: circle(200% at -100% 50%)"></div>

<div class='red' style="clip-path: circle(300% at -200% 50%)"></div>

---

我会考虑一个不同的属性来更好地消除混淆，即radial-gradient。

.box {
  width:200px;
  height:200px;
  border:1px solid;
  background:radial-gradient(circle 50%, red ,blue);
}

<div class="box">

</div>

下面的代码是用来定义一个半径等于50%的圆，但它是无效的，因为我们不知道参考：

注意：此处不允许使用百分比；它们只能用于指定椭圆渐变的大小，而不是圆形渐变。 之所以存在此限制，是因为对于百分比应与哪个维度相关，有多种合理的答案。此模块的未来级别可能会提供使用百分比调整圆圈大小的功能，也许可以更明确地控制使用哪个维度。^ref

我们正在处理矩形形状，因此我们可以使用您正在计算的高度、宽度、半径等。有很多选项，所以他们只是决定使其无效，但对于clip-path，他们采取了决定并定义了使用百分比的参考。

顺便说一句，考虑到closest-side/farthest-side 之类的值，您可以更好地控制您的圈子。

下面将始终为我们提供接触最近边的圆圈（与带有背景的contain 相同）

.red {
  width: 200px;
  height: 200px;
  background: red;
  clip-path:circle(closest-side); 
  border:2px solid;
  box-sizing:border-box;
}

<div class='red'></div>
<div class='red' style="width:300px;"></div>
<div class='red' style="width:100px;"></div>
<div class='red' style="width:50px;"></div>

下面将始终为我们提供最远边的圆圈（与 cover 的背景相同）

.red {
  width: 200px;
  height: 200px;
  background: red;
  clip-path:circle(farthest-side); 
  border:2px solid;
  box-sizing:border-box;
}

<div class='red'></div>
<div class='red' style="width:300px;"></div>
<div class='red' style="width:100px;"></div>
<div class='red' style="width:50px;"></div>

---

结合位置，它们可以给出一些有趣的结果：

.red {
  width: 200px;
  height: 200px;
  background: red;
  border:2px solid;
  box-sizing:border-box;
  transition:1s all;
}

<div class='red' style="clip-path:circle(farthest-side at left); "></div>
<div class='red' style="clip-path:circle(closest-side at 10% 10%); "></div>
<div class='red' style="clip-path:circle(farthest-side at top left); "></div>
<div class='red' style="clip-path:circle(closest-side at 40% 50%); "></div>