CSS 形狀
CSS 形狀模組描述了幾何形狀。它還定義了可以使用這些形狀來控制元素浮動區域幾何形狀的 CSS 屬性;這個區域可以應用於排除,或者指定元素的 content 區域。
該規範定義了幾種建立形狀的方法。內容可以圍繞或在形狀內部進行環繞,而不是遵循元素盒子的預設矩形形狀。
形狀定義了幾何圖形,這些幾何圖形可以用作 CSS 值。此模組提供了用於建立橢圓、多邊形和任意幾何圖形的函式。其他 CSS 模組可以使用此規範中定義的形狀,包括CSS 運動路徑和CSS 遮罩。
CSS 形狀實戰
下面的示例顯示了一張左浮動的圖片,並應用了 shape-outside 屬性,其值為 circle(50%)。這會建立一個圓形形狀,內容現在會圍繞該形狀進行環繞。這改變了環繞文字行框的長度。您可以點選“播放”在 MDN Playground 中編輯程式碼。
參考
屬性
CSS 形狀模組還引入了 shape-inside 和 shape-padding 屬性。目前,沒有瀏覽器支援這些特性。
資料型別
函式
術語
指南
- 形狀概述
-
使用
shape-margin和clip-path屬性定義基本形狀,並使用開發者工具除錯基本形狀。 - 來自盒模型值的形狀
-
使用
border-radius曲率和 CSS 盒模型值來建立形狀。 - 使用
shape-outside的基本形狀 -
使用 CSS 形狀、參考框和
shape-outside屬性建立矩形、圓形、橢圓和多邊形。 - 基於影像的形狀
-
從半透明影像檔案和 CSS 漸變建立形狀。
相關概念
CSS 運動路徑模組
CSS 遮罩模組
CSS 盒模型模組
<box-edge>資料型別
規範
| 規範 |
|---|
| CSS Shapes Module Level 1 |
| CSS 形狀模組級別 2 |
另見
- 形狀生成器
- CSS 形狀資源
- CSS 形狀 101 via alistapart.com (2014)
- 使用 CSS 形狀建立非矩形佈局 via sarasoueidan.com (2013)
- 如何在網頁設計中使用 CSS 形狀 via tutsplus.com (2016)
- 使用形狀路徑編輯器編輯 CSS 形狀 via mozilla.org (2018) (影片)