层叠样式表/剪裁

Clip 属性 Top/Left 坐标

clip 属性的 top 和 left 参数会移除任何坐标高于或低于指定值的像素，基于元素的顶部和左侧边缘。

Clip 属性 Bottom/Right 坐标

• bottom 和 right 参数会移除任何位于指定值以下或之后的像素，基于元素的顶部和左侧边缘。
• bottom 和 right 的值必须高于 top 和 left 的值，才能看到任何层。

Clip 属性限制

• 要使 clip 属性生效，被剪裁的元素必须是绝对定位的，因此使用相对定位的容器将其包围。
• 指定容器的高度可以防止下一行与剪裁区域重叠。

Clip 属性用法

使用 clip: rect(0, auto, auto, 0); 作为默认的剪裁值，以便进行适当的尝试和错误

使用 clip: rect(0, ###, auto, 0); 从左到右剪裁

使用 clip: rect(0, auto, ###, 0); 从上到下剪裁

使用 Clip 属性创建文件上传按钮替换解决方案

使用剪裁、透明度和 z-index 通过将字段透明地定位在图像上，来设置文件输入的样式

 input[type="file"] { outline: none; cursor: pointer; position: absolute; left: 0; clip: rect(0px 215px 22px 145px); z-index: 2; opacity: 0; }

由于文件输入的渲染方式不同，请为 Webkit 浏览器使用单独的样式

* > /**/ input[type="file"], x:-webkit-any-link { outline: none; cursor: pointer; position: absolute; left: 0; clip: rect(0px 86px 22px 0px); z-index: 2; opacity: 0; }