浮動形狀

浮動形狀意思是「內容透過指定形狀，環繞浮動元素」，運用 shape-outside、shape-image-threshold 和 shape-margin 等樣式屬性，可以讓原本四四方方的版面配置，轉換成圓形、橢圓形或多邊形的編排，甚至也可以根據浮動元素的透明度進行不規則的排列，創造出更多有趣的排版方式。

快速導覽：

shape-outside 撰寫語法

屬性值：inset() 內縮距離

屬性值：circle() 圓形

屬性值：ellipse() 橢圓形

屬性值：polygon() 多邊形

屬性值：shape-box 形狀顯示方式

屬性值：url() 使用圖片

shape-margin 撰寫語法

shape-image-threshold 撰寫語法

CSS 教學 - 浮動形狀 shape-outside

shape-outside 撰寫語法

shape-outside 是一個針對「浮動元素」的樣式屬性，沒有繼承特性，當浮動元素設定浮動形狀後，周圍的其他元素內容就會透過指定的「形狀」，環繞或填入浮動元素裡，shape-outside 的屬性值除了預設值 none，還有下列幾種寫法：

基本形狀 ( basic-shape )

基本形狀 ( basic-shape ) 的屬性值會從下列的內建函式擇一使用：

屬性值說明

inset(四邊邊距) 內縮距離

circle(半徑與中心位置) 圓形

ellipse(xy半徑) 橢圓形

polygon(座標) 多邊形
```
div {
  float: left;
  shape-outside: inset(四邊邊距);
}
```
基本形狀 + 形狀顯示方式 ( basic-shape + shape-box )

使用基本形狀屬性值的時候，可以搭配形狀顯示方式 ( shape-box ) 一起使用，形狀顯示方式的屬性值類似 box-sizing 樣式，可以定義周圍內容環繞時最外側的定位，例如定位在外邊界、邊框或內邊距等位置，形狀顯示方式 ( shape-box ) 的屬性值會從下列的內建函式擇一使用：

屬性值最外側位置

margin-box 外邊界外緣 ( 預設值 )。

border-box 邊框外緣。

padding-box 內邊距外緣 ( 邊框內緣 )。

content-box 內邊距內緣。
```
div {
  float: left;
  shape-outside: inset(四邊邊距) margin-box;
}
```
圖片

如果浮動元素是「圖片」，除了可以使用「基本形狀」的屬性值，可以另外使用屬性值 url(圖片網址) 會透過具有「透明區域」的圖片來定義形狀 ( gif 或 png )，只要是圖片中「透明」的部分，外部內容就會填入，不透明的部分則會呈現浮動元素的內容。

屬性值說明

url(圖片網址) 具有透明區域的圖片。
```
img {
  float: left;
  shape-outside: url(圖片網址);
}
```

屬性值	說明
inset(四邊邊距)	內縮距離
circle(半徑與中心位置)	圓形
ellipse(xy半徑)	橢圓形
polygon(座標)	多邊形

屬性值	說明
url(圖片網址)	具有透明區域的圖片。

屬性值：inset() 內縮距離

浮動形狀的 inset() 屬性值屬於 CSS 的內建函式，可以定義浮動元素四個邊的「內縮距離」，類似 padding 或 margin 樣式屬性，可以使用多個數值表現四個邊的內縮距離 ( 使用 CSS 的長度單位 )，寫法如下：

語法	說明
`inset(上右下左)`	空白分隔「四個」數值，分別設定四個方向的內縮距離。
`inset(上 (左右) 下)`	空白分隔「三個」數值，分別設定上、下和左右內縮距離，左右的數值相同。
`inset((上下) (左右))`	空白分隔「兩個」數值，分別設定上下和左右內內縮距離，上下的數值相同，左右的數值相同。
`inset(上下左右)`	「一個」數值，上下左右內內縮距離值相同。

下方的範例呈現浮動元素使用浮動形狀內縮後，與其他元素排版的狀況。

線上展示：https://codepen.io/oxxo/pen/ZEdjxdZ

<!-- HTML 程式碼-->
<div>    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="a">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="b">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div:not(.f) {
    border: 1px solid #000;
    margin: 10px;
    font-size: 15px;
    line-height: 15px;
    width: 320px;
  }
  .f {
    float: left;
    border: 10px solid #f005;
    margin: 20px;
    padding: 20px;
  }
  .a .f {shape-outside: inset(20px);}
  .b .f {shape-outside: inset(40px);}
</style>

CSS 教學 - 浮動形狀 shape-outside - inset() 浮動形狀內縮

除了單純的四邊形內縮，也可以額外加上 ronud 的語法來產生類似「四邊形圓角」的效果，設定方法和「邊框圓角 border-radius」大同小異，下方呈現不同圓角的內縮效果。

線上展示：https://codepen.io/oxxo/pen/VwJBXom

<!-- HTML 程式碼-->
<div class="a">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="b">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="c">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div:not(.f) {
    border: 1px solid #000;
    margin: 10px;
    font-size: 15px;
    line-height: 15px;
    width: 320px;
  }
  .f {
    float: left;
    border: 10px solid #f005;
    margin: 20px;
    padding: 30px;
  }
  .a .f {shape-outside: inset(40px);}
  .b .f {shape-outside: inset(40px round 40px);}
  .c .f {shape-outside: inset(40px round 40px 200px);}
</style>

CSS 教學 - 浮動形狀 shape-outside - inset() 浮動形狀內縮搭配 round 圓角

屬性值：circle() 圓形

浮動形狀的 circle() 屬性值屬於 CSS 的內建函式，會在浮動元素上定義一個圓形範圍，並按照下列規則進行排版：

圓形的範圍不會被周圍內容進入，但周圍內容會進入非圓形的範圍。

圓形的範圍如果超過浮動元素的範圍會被裁切。

圓形使用 CSS 長度單位定義半徑和中心點位置，中心點位置也可以使用位置關鍵字定義 ( 參考 CSS 的長度單位、位置名稱與時間單位 )

circle() 屬性值的寫法如下：

div {
  float: left;
  shape-outside: circle(半徑);             /* 定義圓形半徑，預設位於中心 */
  shape-outside: circle(半徑 at center);   /* 定義圓形半徑，位於中心 */
  shape-outside: circle(半徑 at left top); /* 定義圓形半徑，位於左上角 */
}

下方範例呈現三種不同圓形的浮動形狀。

線上展示：https://codepen.io/oxxo/pen/BagPrXY

<!-- HTML 程式碼-->
<div class="a">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="b">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="c">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div:not(.f) {
    border: 1px solid #000;
    margin: 10px;
    font-size: 15px;
    line-height: 15px;
    width: 320px;
  }
  .f {
    float: left;
    border: 10px solid #f005;
    margin: 20px;
    padding: 30px;
  }
  .a .f {shape-outside: circle(50px);}
  .b .f {shape-outside: circle(100px at center);}
  .c .f {shape-outside: circle(100px at left top);}
</style>

CSS 教學 - 浮動形狀 shape-outside - circle() 圓形

屬性值：ellipse() 橢圓形

浮動形狀的 ellipse() 屬性值屬於 CSS 的內建函式，會在浮動元素上定義一個橢圓形範圍，並按照下列規則進行排版：

橢圓形的範圍不會被周圍內容進入，但周圍內容會進入非橢圓形的範圍。

橢圓形的範圍如果超過浮動元素的範圍會被裁切。

橢圓形使用 CSS 長度單位定義 x y 半徑和中心點位置，中心點位置也可以使用位置關鍵字定義 ( 參考 CSS 的長度單位、位置名稱與時間單位 )

ellipse() 屬性值的寫法如下：

div {
  float: left;
  shape-outside: ellipse(x 半徑 y 半徑);             /* 定義橢圓形 x y 半徑，預設位於中心 */
  shape-outside: ellipse(x 半徑 y 半徑 at center);   /* 定義橢圓形 x y 半徑，位於中心 */
  shape-outside: ellipse(x 半徑 y 半徑 at left top); /* 定義橢圓形 x y 半徑，位於左上角 */
}

下方範例呈現三種不同橢圓形的浮動形狀。

線上展示：https://codepen.io/oxxo/pen/poXZLMq

<!-- HTML 程式碼-->
<div class="a">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="b">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="c">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div:not(.f) {
    border: 1px solid #000;
    margin: 10px;
    font-size: 15px;
    line-height: 15px;
    width: 320px;
  }
  .f {
    float: left;
    border: 10px solid #f005;
    margin: 20px;
    padding: 30px;
  }
  .a .f {shape-outside: ellipse(40px 20px);}
  .b .f {shape-outside: ellipse(50px 100px);}
  .c .f {shape-outside: ellipse(100px 40px at top center);}
</style>

CSS 教學 - 浮動形狀 shape-outside - ellipse() 橢圓形

屬性值：polygon() 多邊形

浮動形狀的 polygon() 屬性值屬於 CSS 的內建函式，會在浮動元素上定義一個由多個座標組成的多邊形範圍，並按照下列規則進行排版：

多邊形的範圍不會被周圍內容進入，但周圍內容會進入非多邊形的範圍。

多邊形的範圍如果超過浮動元素的範圍會被裁切。

多邊形使用 CSS 長度單位定義每個端點的 x y 座標位置 ( 參考 CSS 的長度單位 )

多邊形端點的座標，採用相對浮動元素的位置，例如設定 (50,50) 等於 (x+50,y+50)。

如果多邊形的第一個端點和最後一的端點位置不同，會自動將兩個點連在一起。

polygon() 屬性值的寫法如下：

div {
  float: left;
  shape-outside: polygon(50% 0, 100% 50%, 100% 50%, 0 50% ); /* 定義旋轉 90 度的四邊形 */
  shape-outside: polygon(50% 0, 100% 100%, 0 100%);   /* 定義三角形*/
  shape-outside: polygon(0 0, 100% 50%, 0 100%);   /* 定義三角形 */
}

下方範例呈現三種不同多邊形的浮動形狀。

線上展示：https://codepen.io/oxxo/pen/ExBpLYx

<!-- HTML 程式碼-->
<div class="a">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="b">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="c">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div:not(.f) {
    border: 1px solid #000;
    margin: 10px;
    font-size: 15px;
    line-height: 15px;
    width: 320px;
  }
  .f {
    float: left;
    border: 10px solid #f005;
    margin: 20px;
    padding: 30px;
  }
  .a .f {shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50% );}
  .b .f {shape-outside: polygon(50% 0, 100% 100%, 0 100%);}
  .c .f {shape-outside: polygon(0 0, 100% 50%, 0 100%);}
</style>

CSS 教學 - 浮動形狀 shape-outside - polygon() 多邊形

屬性值：shape-box 形狀顯示方式

shape-box 屬性值定義了「形狀最外側的位置」，用有下列四種屬性值：

shape-box 屬性值僅適用基本形狀的浮動形狀，對於圖片的浮動形狀沒有作用。

屬性值	最外側位置
margin-box	外邊界外緣 ( 預設值 )。
border-box	邊框外緣。
padding-box	內邊距外緣 ( 邊框內緣 )。
content-box	內邊距內緣。

下方的範例可以清楚看出四種形狀顯示方式的差異。

線上展示：https://codepen.io/oxxo/pen/PorBeYO

<!-- HTML 程式碼-->
<div class="a">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="b">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="c">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="d">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f">oxxo.studio</div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div:not(.f) {
    border: 1px solid #000;
    margin: 10px;
    font-size: 15px;
    line-height: 15px;
    width: 320px;
  }
  .f {
    float: left;
    border: 10px solid #f005;
    margin: 20px;
    padding: 30px;
    color: red;
    font-weight: bold;
  }
  .a .f {shape-outside: margin-box;}
  .b .f {shape-outside: border-box;}
  .c .f {shape-outside: padding-box;}
  .d .f {shape-outside: content-box;}
</style>

CSS 教學 - 浮動形狀 shape-outside - shape-box 形狀顯示方式

屬性值：url() 使用圖片

如果浮動元素是「圖片」，可以使用屬性值 url(圖片網址) 加入類似「遮罩」的浮動形狀，這種使用方式會透過圖片的「不透明區域」定義形狀，只要是圖片中「透明」的部分，外部內容就會填入，不透明的部分則會呈現浮動元素的內容，因為計算形狀使用的是圖片的透明通道，所以需要使用 gif 或 png 具有透明通道的圖片。

圖片的浮動形狀只能套用在「圖片」。

圖片浮動形狀的尺寸會自動調整為「浮動元素的尺寸」。

作為屬性值的圖片「不會顯示」，只作為形狀的運算。

下圖使用一張具有透明背景的圖片作為浮動形狀，搭配不同的原始圖片，就能看出浮動形狀的效果 ( 套用在不同圖片上，仍然會呈現同樣的浮動形狀 )。

線上展示：https://codepen.io/oxxo/pen/poXZVzq

<!-- HTML 程式碼-->
<div class="a">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="b">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="c">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <img src="https://steam.oxxostudio.tw/image/index.jpg">
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="d">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <img src="https://steam.oxxostudio.tw/image/index.jpg">
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div:not(.f) {
    border: 1px solid #000;
    margin: 10px;
    font-size: 15px;
    line-height: 15px;
    width: 320px;
  }
  img {
    float: left;
    width: 200px;
    height: 220px;
    color: red;
    font-weight: bold;
    shape-outside: url(https://steam.oxxostudio.tw/download/css/function-filter-demo.png);
  }
  .b img, .d img {
    float: right;
  }
</style>

CSS 教學 - 浮動形狀 shape-outside - url() 使用圖片

下圖是浮動靠右的效果。

CSS 教學 - 浮動形狀 shape-outside - url() 使用圖片

shape-margin 撰寫語法

單純使用 shape-outside 無法做到改變「一般元素和使用圖片浮動形狀的圖片邊界」，如果要做到這個效果，就必須額外使用 shape-margin 樣式屬性，shape-margin 會增加浮動形狀的尺寸，進而擴大內容和浮動元素的邊界，但超過了原本浮動元素的外框，就會被裁切而不顯示。

shape-margin 的屬性值使用「非負值的絕對長度單位」，預設值為 0，沒有繼承特性，下方範例沿用上述套用圖片的浮動形狀，可以看出設定不同 shape-margin 所產生不同的邊界效果。

線上展示：https://codepen.io/oxxo/pen/gONjzQd

<!-- HTML 程式碼-->
<div class="a">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="b">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="c">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <img src="https://steam.oxxostudio.tw/download/css/function-filter-demo.png">
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div:not(.f) {
    border: 1px solid #000;
    margin: 10px;
    font-size: 15px;
    line-height: 15px;
    width: 320px;
  }
  img {
    float: left;
    width: 200px;
    height: 220px;
    color: red;
    font-weight: bold;
    shape-outside: url(https://steam.oxxostudio.tw/download/css/function-filter-demo.png);
  }
  .b img {shape-margin: 15px;}
  .c img {shape-margin: 30px;}
</style>

CSS 教學 - 浮動形狀 shape-outside - shape-margin 撰寫語法

shape-image-threshold 撰寫語法

使用圖片作為浮動形狀時，預設採用「全透明」的透明通道作為形狀的參考，而 shape-image-threshold 樣式屬性可以調整透明度的臨界值，shape-image-threshold 使用的屬性值為 0～1 的浮點數，預設值為 0，數值越高透明度的臨界值就越高，沒有繼承特性。

下方的範例使用背景色漸層的方式，可以看出不同 shape-image-threshold 的設定值會有不同的效果。

線上展示：https://codepen.io/oxxo/pen/WNqKJYB

<!-- HTML 程式碼-->
<div class="a">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f"></div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="b">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f"></div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>
<div class="c">    
  <span>STEAM 教育學習網秉持著 STEAM/STEM 的精神，透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</span>
  <div class="f"></div>
  <span>STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。STEAM 教育延伸 STEM 的精神，除了強調「動手做」以及「解決問題」的能力，更將藝術 Art、技術、工程和數學整合，創造出能夠應用於真實生活的應用。</span>
</div>

<!-- CSS 程式碼 -->
<style>
  div:not(.f) {
    border: 1px solid #000;
    margin: 10px;
    font-size: 15px;
    line-height: 15px;
    width: 320px;
    background: yellow;
  }
  .f {
    float: left;
    width: 150px;
    height: 100px;
    background-image: linear-gradient(45deg, red, transparent 50%, transparent);
    shape-outside: linear-gradient(45deg, red, transparent 50%, transparent);
  }
  .a .f {shape-image-threshold: 0.2;}
  .b .f {shape-image-threshold: 0.5;}
  .c .f {shape-image-threshold: 0.8;}
</style>

CSS 教學 - 浮動形狀 shape-outside - shape-image-threshold 撰寫語法

小結

其實「浮動形狀」這個功能，對於排版來說是個可有可無的功能，不過如果學會了這個樣式屬性，就能讓浮動元素和一般元素的互動更加靈活，也能做出更多有趣的排版效果。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

浮動形狀

shape-outside 撰寫語法

屬性值：inset() 內縮距離

屬性值：circle() 圓形

屬性值：ellipse() 橢圓形

屬性值：polygon() 多邊形

屬性值：shape-box 形狀顯示方式

屬性值：url() 使用圖片

shape-margin 撰寫語法

shape-image-threshold 撰寫語法

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與內容函式

顏色與濾鏡

文字樣式

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩