層疊樣式表/剪裁

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