浮动形状 ( shape-* )

浮动形状意思是“内容透过指定形状，环绕浮动元素”，运用 shape-outside、shape-image-threshold 和 shape-margin 等样式属性，可以让原本四四方方的版面配置，转换成圆形、椭圆形或多边形的编排，甚至也可以根据浮动元素的透明度进行不规则的排列，创造出更多有趣的排版方式。

快速导览：

• shape-outside 撰写语法
  • 属性值：inset() 内缩距离
  • 属性值：circle() 圆形
  • 属性值：ellipse() 椭圆形
  • 属性值：polygon() 多边形
  • 属性值：shape-box 形状显示方式
  • 属性值：url() 使用图片
• shape-margin 撰写语法
• shape-image-threshold 撰写语法

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

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() 内缩距离

浮动形状的 inset() 属性值属于 CSS 的内建函数，可以定义浮动元素四个边的“内缩距离”，类似 padding 或 margin 样式属性，可以使用多个数值表现四个边的内缩距离 ( 使用 CSS 的长度单位 )，写法如下：

下方的范例呈现浮动元素使用浮动形状内缩后，与其他元素排版的状况。

线上展示：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>

除了单纯的四边形内缩，也可以额外加上 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>

属性值：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>

属性值：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>

属性值：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>

属性值：shape-box 形状显示方式

shape-box 属性值定义了“形状最外侧的位置”，用有下列四种属性值：

shape-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>

属性值：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>

下图是浮动靠右的效果。

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>

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>

小结

其实“浮动形状”这个功能，对于排版来说是个可有可无的功能，不过如果学会了这个样式属性，就能让浮动元素和一般元素的互动更加灵活，也能做出更多有趣的排版效果。

意见反馈