[譯] 學習 CSS clip-path 屬性

yuanxin 发布于2019-08-29 11:00 / 3100人阅读

摘要：整體來說網頁主要是由矩形所構成的，另一方面印刷品則具備相對多樣性。即便我們設定的元素不再是矩形，但周圍的元素排列方式仍然維持原本矩形的佈局。為了達成周圍的元素跟著裁切的形狀，我們可以使用屬性。周圍的元素仍需要靠來修正。

整體來說網頁主要是由矩形所構成的，另一方面印刷品則具備相對多樣性。造成這樣差異的原因有很多，不過其中一個即是缺少合適的工具。

這篇文章主要會介紹 clip-path 這個 css 的樣式規則可以讓我們遮掉元素的局部，就是不顯示出來。達成這項功能背後的原理就是我們可以透過它去定義可視區，類似於遮色片的概念。我們將從基礎開始然後涵蓋語法，進一步理解進階的概念。

基礎

clip 意思是剪裁，意味著修剪某物的外型。在網頁設計的情況下，是讓我們可以去決定某個元素完全隱藏或局部隱藏。而在這篇文章中另外兩個相關的概念是 clipping path 和 clipping region。

clipping path 剪裁路徑意思就是我們使用它去修剪一個元素，透過路徑組成 clipping region 剪裁範圍。這個範圍或稱區域可以是簡單的形狀或複雜的多邊形。剪裁範圍就是透過一個封閉的剪裁路徑所組成的，這與您使用 Illustrator 的鋼筆工具繪製形狀的概念是一樣的。

任何在形狀範圍外的東西都會被瀏覽器裁掉。不只包含背景其他像是內容，borders，text-shadow 效果都會被裁掉。此外瀏覽器甚至不會處理範圍外的事件像是 hover, click 等。

即便我們設定的元素不再是矩形，但周圍的元素排列方式仍然維持原本矩形的佈局。為了達成周圍的元素跟著裁切的形狀，我們可以使用 shape-outside 屬性。

同時記住不要把舊的樣式 clip 和 clip-path 等搞混了。舊有的屬性只支援矩形的裁切。

使用

目前這個樣式規則的語法如下：

clip-path:  | [  ||  ] | none

上面語法表示的是：

clip-source 會是一個 URL 參考到一個 SVG 元素，這個元素可以是在檔案內部的或外連的。

basic-shape 基本形狀的 function ，您可以在 CSS Shapes 規範中找到並使用。

geometry-box 可選的參數。搭配 basic-shape 函數，它的用途是設定整張畫布的基準點，定義裁切從哪範圍開始。如果我們自訂 geometry-box 那裁切路徑便會照著我們定義的形狀，包含任何圓角設定 border-radius 。這樣說有點模糊，稍後我們會詳細介紹。

現在，讓我們來思考下面這段 css 程式

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

這段設定將會裁切所有圖片為一個菱形。不過為什麼圖片會變成菱形呢？為什麼不是梯形或平行四邊形？您應該猜到了，這是因為形狀取決為我們定義的頂點。下面圖片說明了建立裁切形狀時使用的慣例

每個座標的第一個參數指定了該座標的 x 軸，第二個參數則是 y 軸。所有的點依照順時鐘的方向繪製。依照這個規則與上圖我想您應該理解了。

如果您正在使用 CodePen 測試這些語法，請注意上面的程式範例僅在 Chrome 並且需要使用 prefix 才能正常運行，您可以打開 Auto Prefix 功能。

CodePen

使用 geometry-box 裁切元素

當我們要裁切 HTML 元素時，geometry-box 可以是下列值 margin-box, border-box, padding-box, content-box

.el {
  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;
  margin: 15px;
}

上面的範例，margin-box 會決定我們得座標點從 margin 的範圍開始，而 (10%, 10%) 就是我們實際內容的左上角，因此 clip-path 也必須對應計算。

SVG 元素的狀況下，參數可能是 fill-box, stroke-box, view-box 。其中 view-box 會最接近整個 svg 的可視範圍。

clip-path 的使用方式

關於這個屬性有很多有趣的使用方式。第一個就是它可以美化文字內容。您可以觀察一下下圖，我們透過背景色與裁切所營造出的感覺不再受限與單純的方形。

簡單說您可以簡單的使用背景色，漸層等等您已經熟悉的屬性然後搭配 clip-path ，例如上面粉紅色背景類似泡泡對話框的效果，從前我們可以要透過 border 組成三角形在透過 transform 和調整位置等屬性去完成，現在換成 clip-path 只需要一行，我們可以輕鬆完成任何不規則的形狀。

.msg {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);
}

當然您可以用來裁切圖片使其變成各種不同的形狀，您的相片圖庫的頁面不再只能用矩形呈現。下面是一個範例建議您使用 Chrome 玩玩

CodePen

動畫

這個屬性也能夠被用在動畫上。唯一要注意的是初始時和最後結果的座標數量要一致。

@keyframes polygons {
  25% {
    clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
  }
  50% {
    clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);
  }
  70% {
    clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);
  }
}

為了維持動畫的順暢，基本上座標數量最好保持一致，至於形狀的變化您可以透過重疊座標來實現。

奇技淫巧

另外我們還可以透過 clip-path 來隱藏元素，不過這個效果類似於 visibility 和 opacity 該位置空間仍會被佔據。

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

關於瀏覽器支援度

這個屬性暫時在 IE, Edge 是不能使用的，Firefox 也還沒完全支援只支援部份語法，在 v47 還得要套過 layout.css.clip-path-shapes.enabled 來開啟。Chrome 的話要加上 -webkit- prefix。

總結

總結來說關於 clip-path 的重點大略為

設定的座標點(clip-path)需要能夠封閉，圍成一個形狀(clip-range)，這個形狀就是顯示的區域。

周圍的元素仍需要靠 shape-outside 來修正。

geometry-box 用來設定座標軸範圍，用在 HTML 和 SVG 參數是不同的。

動畫的部分座標點數量需維持一致。

目前大多數的瀏覽器支援度還不夠。

clippy 和座標產生器可以協助我們取得座標。

原文參考

Introducing the CSS clip-path Property

云服务器 GPU云服务器屬性 clip-path 實作來學習參透閉包 css引入css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111363.html

[譯] 透過重新實作來學習參透閉包

摘要：不過到底是怎麼保留的另外為什麼一個閉包可以一直使用區域變數，即便這些變數在該內已經不存在了為了解開閉包的神秘面紗，我們將要假裝沒有閉包這東西而且也不能夠用嵌套來重新實作閉包。原文出處: 連結話說網路上有很多文章在探討閉包(Closures)時大多都是簡單的帶過。大多的都將閉包的定義濃縮成一句簡單的解釋，那就是一個閉包是一個函數能夠保留其建立時的執行環境。不過到底是怎麼保留的？另外...

CoXie 2019-08-19 17:39 评论0 收藏0
【譯】chrome-remote-interface

摘要：該支持下列事件當到的連接已建立時觸發。取得該調試協議描述符。在關閉請求收到響應后執行，他將獲得下列參數一個對象，指明成功狀態當缺省時，將返回一個對象。當缺省時，將返回一個對象，並且狀態取決于屬性。本文翻譯自：chrome-remote-interface原文更新時間：July 21,2017譯者：Pandorym Chrome 調試協議的接口，他提供一個使用 JavaScript ...

lentoo 2019-08-20 18:27 评论0 收藏0
[譯 + 更新] 參透 Node 中 exports 的 7 種設計模式

摘要：現在，我們可以開始探討介面的設計模式了。匯出命名空間一個簡單且常用的設計模式就是匯出一個包含數個屬性的物件，這些屬性具體的內容主要是函式，但並不限於函式。如此，我們就能夠透過匯入該模組來取得這個命名空間下一系列相關的功能。前言這篇文章試著要整理，翻譯Export This: Interface Design Patterns for Node.js Modules這篇非常值得一讀的...

wmui 2019-08-20 11:08 评论0 收藏0
[譯 + 補充]理解 DOM 座標

摘要：相對於座標在可視區的最左上角。滑鼠座標通常透過事件取得。再次強調不幸的是沒有屬性可以直接取得元素對應的座標。觸發事件的元素相對於父容器定位元素的座標，從開始計算。上個座標與當前的座標移動距離。座標系統在瀏覽器中有兩種座標系統 & 滑鼠座標： 1. 相對於 `document` - 座標 (0, 0) 在整個頁面的最左上角。 2. 相對於 `window` - 座標 (0, 0) 在...

Lionad-Morotar 2019-08-21 15:09 评论0 收藏0
[譯] Houdini: 你還沒聽說！這可能是 CSS 下一件最令人興奮的大事

摘要：接下來我們將會更具體的說明是什麼東西和這傢伙會怎麼解決這些問題，並且列出目前開發中一些令人興奮的功能。這個功能甚至還沒有一個瀏覽器支援。完整的清單請查閱目前還未被寫入規範，意思是這邊提到任何內容極有可能會改變。譯者：其實...我想說這可能是最令我感到興奮..但又害怕頭痛的功能... 附上原文連結你曾經想要使用某個 CSS 的新功能，但是最後卻因為這個功能瀏覽器還未全面支援而放棄了嗎...

bergwhite 2019-08-30 12:53 评论0 收藏0