CSS 形狀

CSS 形狀模組描述了幾何形狀。它還定義了可以使用這些形狀來控制元素浮動區域幾何形狀的 CSS 屬性;這個區域可以應用於排除,或者指定元素的 content 區域。

該規範定義了幾種建立形狀的方法。內容可以圍繞或在形狀內部進行環繞,而不是遵循元素盒子的預設矩形形狀。

形狀定義了幾何圖形,這些幾何圖形可以用作 CSS 值。此模組提供了用於建立橢圓、多邊形和任意幾何圖形的函式。其他 CSS 模組可以使用此規範中定義的形狀,包括CSS 運動路徑CSS 遮罩

CSS 形狀實戰

下面的示例顯示了一張左浮動的圖片,並應用了 shape-outside 屬性,其值為 circle(50%)。這會建立一個圓形形狀,內容現在會圍繞該形狀進行環繞。這改變了環繞文字行框的長度。您可以點選“播放”在 MDN Playground 中編輯程式碼。

參考

屬性

CSS 形狀模組還引入了 shape-insideshape-padding 屬性。目前,沒有瀏覽器支援這些特性。

資料型別

函式

術語

指南

形狀概述

使用 shape-marginclip-path 屬性定義基本形狀,並使用開發者工具除錯基本形狀。

來自盒模型值的形狀

使用 border-radius 曲率和 CSS 盒模型值來建立形狀。

使用 shape-outside 的基本形狀

使用 CSS 形狀、參考框和 shape-outside 屬性建立矩形、圓形、橢圓和多邊形。

基於影像的形狀

從半透明影像檔案和 CSS 漸變建立形狀。

CSS 運動路徑模組

CSS 遮罩模組

CSS 背景與邊框模組

CSS 盒模型模組

規範

規範
CSS Shapes Module Level 1
CSS 形狀模組級別 2

另見