搜尋

浮動形狀

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

快速導覽：

CSS 教學 - 浮動形狀 shape-outside

shape-outside 撰寫語法

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

屬性值：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 撰寫語法

小結

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

意見回饋

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

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

關鍵字與文字數值 長度與角度單位 顏色單位 位置名稱與時間單位

變數與函式

變數 數學計算 文字與清單計數 生成內容與引號 色彩模型 漸層色 影像濾鏡

文字樣式

使用通用字型 使用外部字型 @font-face 定義字型 文字尺寸 常用文字樣式 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 特殊文字樣式

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬度與高度 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 影像邊框 輪廓 ( outline ) 可見性與透明度 內容溢出與裁切

背景與陰影

背景顏色 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 定義計數規則 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 定位 ( position )

Flexbox 彈性排版

Flexbox 彈性盒子