等效的 CSS 剪辑/剪辑路径

Question

我的 CSS 文件中有一行:

clip: rect(0 0 0 0); 

我看到 clip 现在已贬值，所以我尝试使用 clip-path。 clip-path 的等价物是什么？

是吗:

clip-path: inset(0 0 0 0);

Answer 1

不，它不是inset(0 0 0 0)。旧的 clip 属性的参数指定了被剪切的矩形的 Angular 与框的 (0,0) 的距离，而在新的 clip-path 中: inset() 它们是从顶部、从右、从底部和从左开始的点。

因此，rect(0 0 0 0) 表示剪切矩形的所有四个 Angular 都位于 (0,0)。而 inset(0 0 0 0) 表示对于 100px x 100px 的框，剪切矩形的四个 Angular 位于 (0,0) (100,0) (100,100) (0,100)。简单来说，clip: rect(0 0 0 0) 是 clip everything 而 clip-path: inset(0 0 0 0) 是剪辑没有。

类似地，clip: rect(0 10px 10px 0) 将生成一个 10px x 10px 的框，其在新语法中的等效项为 clip: inset(0 90px 90px 0)(如果未剪裁框为 100px x 100px)。

(注意:为了澄清起见，非 Webkit/Blink 浏览器目前还不完全支持 CSS clip-path，因此该代码段无法在这些浏览器中按预期工作。)

div {
  position: absolute;
  height: 100px;
  width: 100px;
  background: yellowgreen;
}
.clip {
  clip: rect(0 0 0 0);
}
.clip-path-inset {
  top: 110px;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}
.clip-1 {
  top: 220px;
  clip: rect(0 10px 10px 0);
}
.clip-path-inset-1 {
  top: 330px;
  -webkit-clip-path: inset(0 90px 90px 0);
  clip-path: inset(0 90px 90px 0);
}
.clip-path-polygon-1 {
  top: 440px;
  -webkit-clip-path: polygon(0px 0px, 10px 0px, 10px 10px, 0px 10px);
  clip-path: polygon(0px 0px, 10px 0px, 10px 10px, 0px 10px);
}

<div class='clip'>Some text</div> <!-- this won't be visible as it has rect(0 0 0 0) -->

<div class='clip-path-inset'>Some text</div> <!-- this will be fully visible as it has inset(0 0 0 0)-->

<div class='clip-1'>Some text</div> <!-- this will show a 10px x 10px box -->

<div class='clip-path-inset-1'>Some text</div> <!-- this will show a 10px x 10px box -->

<div class='clip-path-polygon-1'>Some text</div> <!-- this will show a 10px x 10px box -->