CSS shape-outside 屬性

定義和用法

shape-outside 屬性允許您為行內內容定義包裹形狀。默認情況下，行內內容會圍繞其外邊距框進行包裹，而使用 shape-outside，您可以自定義這種包裹方式。

shape-outside 屬性定義了浮動元素的浮動區域。這個浮動區域定義了行內內容浮動元素圍繞其進行包裹的形狀。

實例

讓行內內容圍繞圖像以圓形環繞：

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

親自試一試

CSS 語法

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

屬性值

值 描述
none 默認值。浮動區域不受影響。行內內容圍繞元素的外邊距框進行包裹。
margin-box 定義由外邊距外邊緣包圍的形狀。
border-box 定義由邊框外邊緣包圍的形狀。
padding-box 定義由內邊距外邊緣包圍的形狀。
content-box

定義由內容邊緣包圍的形狀。

此框的每個角半徑為 0 或 border-radius - border-width - padding 中的較大值。
basic-shape 浮動區域基于 inset()、circle()、ellipse() 或 polygon() 函數的形狀。
url(image) 浮動區域基于指定圖像的 alpha 通道，由 shape-image-threshold 定義。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： none
繼承性： 否
動畫制作： yes for basic-shape. Read about animatable
版本： CSS Shapes Module Level 1
JavaScript 語法： object.style.shapeOutside="circle(50%)"

瀏覽器支持

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24