[譯]使用 Firefox Shape Path 編輯器編輯 shape-outside、clip-path 屬性

原文：Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor, by Josh Marinacci

頁面佈局不必定是四四方方的。歷史上，頁面中的每一個元素都被渲染爲矩形，但也能夠不是矩形。藉助 CSS Shapes 咱們能夠建立與印刷雜誌同樣時尚的頁面佈局，同時又具備網頁自己的優點。

CSS Shapes 讓你的網頁設計突破矩形的限制。全部經典的雜誌設計元素，如非矩形文本流和非矩形形狀的圖像，如今均可以使用低代價的新 CSS 標準實現。文字可以流動，圖像能夠變圓，一些不平行線條的出現甚至可使你的網站脫穎而出，讓你的品牌不同凡響。怎樣可以脫穎而出，是當今大多數網站面臨的最大挑戰，而 CSS Shapes 就能夠助你一臂之力。

Image by Sara Soueidan

標準

元素形狀只能經過兩個 CSS 屬性控制：shape-outside 和 clip-path。

shape-outside 屬性改變 浮動 DOM 元素外的內容流向，它影響佈局，但不影響繪製。clip-path 屬性定義 DOM 元素的裁剪路徑，路徑內的元素內容可見，路徑外的不可見，它影響繪製，但不影響佈局。

左：應用了 clip-path 屬性 右：應用了 shape-outside 屬性

由於兩個屬性是分開的，且控制不一樣的方面（繪製或佈局），你能夠根據須要使用它們中的一個或者兩個。並且還有一個好消息，它們如今都支持一樣的 basic-shape 語法。

將圖片裁剪成圓形怎麼作？使用 clip-path: circle(50%) 就能夠了。想要讓文本按照圓形軌跡包圍圖片的話，就使用 shape-outsideL circle(50%)。basic-shape 語法支持的裁剪圖形包括矩形、圓形、橢圓形和多邊形。固然，手動定位包含多個點的多邊形很痛苦，幸運的是，咱們有一個更好的辦法。

Shape Path 編輯器

Firefox 62 開始支持 Shape Path 編輯器，你能夠以可視化的方式在 CSS 查看器中直接編輯形狀。打開 Firefox，使用 Firefox Developer Tools 選擇要編輯形狀的元素，選中元素後，會發如今 shape-outside 和 clip-path 屬性旁邊會顯示一個小小的 icon 圖標，若是元素沒有設置這兩個屬性的話，你也能夠手動添加。接下來點擊這個 icon 開始可視化編輯，你能夠用鼠標 直接編輯 元素的形狀。

打開控制檯查看器，選擇要編輯的元素：

譯者注：圖裏打開的方式有些繁瑣，直接 F12 就能打開控制檯查看器了

點擊 clip-path 或 shape-outside 旁邊的 icon。

編輯裁剪路徑：

編輯 outside-shape：

演示的 demo 頁面 在這裏。

更多的 CSS Shape 編輯器方面的內容能夠查看 完整文檔。

漸進加強

今天的大多數瀏覽器都支持 CSS shapes 了，在不支持的瀏覽器中咱們也能平穩地退化。使用如今瀏覽器的用戶能夠獲得良好的閱讀體驗，在不支持的瀏覽器中用戶 也感受不到有什麼不對。

驚人的應用案例

下面列舉了使用了 CSS Shapes 實現的幾個驚人的應用案例：

頁面中使用 clip-path 實現的文本效果：

via Mandy Michael

使用 clip-path 實現的植物和背景的效果：

via Aga Naplocha

還有一個結合 clip-path 和 shape-outside 屬性達到的效果：

via Nicholas Evans

打破常規

今日能實現的對元素形狀的控制得益於有 shape-outside 和 clip-path 兩個屬性。Firefox Shape Path 編輯器讓編輯它們變得更加容易。

你的網站裏有使用過這種打破常規的佈局嗎？

（完）