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属性的参数指定了剪切的矩形角应该从框的(0,0)开始的距离，而在新的clip-path: inset()中，它们是来自顶部，从右侧，从底部和左侧。

因此，rect(0 0 0 0)表示剪切矩形的所有四个角都在（0,0）。而inset(0 0 0 0)意味着对于100px x 100px的盒子，剪切的rect的四个角位于（0,0）（100,0）（100,100）（0,100）。简而言之，clip: rect(0 0 0 0)是剪辑一切，而clip-path: inset(0 0 0 0)是剪辑没有。

类似地，clip: rect(0 10px 10px 0)将生成一个10px x 10px的框，并且在新语法中它的等价物将是clip: inset(0 90px 90px 0)（如果未剪切的框是100px×100px）。

（注意：为了澄清，非Webkit / Blink浏览器尚未完全支持CSS clip-path，因此该片段在这些浏览器中无法正常工作。）

＆＃13;

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);
}

＆＃13;

<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 -->

＆＃13;

CSS剪辑/剪辑路径等效

1 个答案: