CSS剪辑/等效于剪辑路径 [英] CSS clip / clip-path equivalent

问题描述

我的CSS文件中有一行:

I have a line in my CSS file:

clip: rect(0 0 0 0); 

我看到 clip 现在已贬值，所以我尝试使用 clip-path . clip-path 的等效项是什么?

I see that clip is now depreciated, so I am attempting to use clip-path. What is clip-path's equivalent?

是吗

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

推荐答案

否，它不是 inset(0 0 0 0).旧的 clip 属性的参数指定了裁剪矩形区域的角应位于框的(0,0)处的距离，而在新的 clip-path中:inset()是从上到下，从右到下，从左到左的点.

No, it is not inset(0 0 0 0). The old clip property's parameters specify the distance at which the clipped rect's corners should be located from (0,0) of the box whereas in new clip-path: inset() they are points from the top, from right, from bottom and from left.

因此， rect(0 0 0 0)表示修剪的rect的所有四个角都在(0,0).而 inset(0 0 0 0)表示对于100px x 100px的框，裁剪后的矩形的四个角为(0,0)(100,0)(100,100)(0,100).简而言之， clip:rect(0 0 0 0)是剪辑一切，而 clip-path:inset(0 0 0 0)是剪辑一无所有.

So, rect(0 0 0 0) means all four corners of the clipped rect are at (0,0). Whereas inset(0 0 0 0) would mean the clipped rect's four corners are at (0,0) (100,0) (100,100) (0,100) for a 100px x 100px box. To put simply, clip: rect(0 0 0 0) is clip everything while clip-path: inset(0 0 0 0) is clip nothing.

类似地， clip:rect(0 10px 10px 0)将产生一个10px x 10px的框，其在新语法中的等效值为 clip:inset(0 90px 90px 0)/code>(如果未裁剪的框是100px x 100px).

Similarly, clip: rect(0 10px 10px 0) would produce a 10px x 10px box and its equivalent in the new syntax would be clip: inset(0 90px 90px 0) (if the un-clipped box is 100px by 100px).

(注意:为澄清起见，非Webkit/Blink浏览器尚不完全支持CSS clip-path ，因此该代码段在这些浏览器中无法正常工作.)

(Note: Just for clarification, non Webkit/Blink browsers do not support CSS clip-path fully as yet and so the snippet will not work as expected in those browsers.)

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

这篇关于CSS剪辑/等效于剪辑路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！