CSS規範新增了一個模組：CSS Shapes，shape-outside屬性屬於該模組，它能影響浮動元素周邊內容流的形狀（即浮動形狀），可接收三類值：形狀盒子、函式和影象。

一、形狀盒子

　　形狀盒子（shape box）會指定形狀的邊界，既能單獨使用，也能與另外兩類值組合使用，可選的關鍵字如下所列，其中margin-box是shape-outside屬性的預設值。

　　（1）margin-box：以外邊距為界。

　　（2）border-box：以邊框為界。

　　（3）padding-box：以內邊距為界。

　　（4）content-box：以內容為界。

　　下圖演示了四種形狀盒子的效果，外邊距、邊框和內邊距都設為了10px，程式碼中只列出了關鍵樣式，並只舉了其中的一種情況。

<style>
  .container {
    overflow: hidden;
  }
  div {
    float: left;
    padding: 10px;
    margin: 10px;
    border: 10px solid #FC0;
    background: #F60;
    background-clip: content-box;
  }
  .border-box {
    shape-outside: border-box;
  }
</style>
<section class="container">
  <div class="border-box">border-box</div>
  <p>My name is Strick.</p>
  <p>My name is Strick.</p>
  <p>My name is Strick.</p>
  <p>My name is Strick.</p>
  <p>My name is Strick.</p>
</section>

二、函式

　　有4個形狀函式可供選擇，分別是circle()、ellipse()、inset()以及polygon()。

1）circle()

　　第一種是圓形，可定義半徑和圓點位置，例如浮動元素的寬高都為100px，圓的半徑為50px，樣式如下所示，效果如下圖所示，其中白色邊框的圓就是計算出的浮動形狀。

div {
  float: left;
  width: 100px;
  height: 100px;
  shape-outside: circle(50px);
}

　　接下來指定圓點的位置，需要使用at關鍵字將半徑和位置分隔。在下面的樣式中，圓點處在元素的右上角，注意觀察下圖中的浮動形狀，它超出了元素的邊界，超出部分預設會被裁剪掉。

div {
  shape-outside: circle(50px at right top);
}

　　當用百分數指定半徑時，需要有個參照值，該值得通過下面的公式計算得到，其中width是形狀盒子的寬，height是其高。

　　假設半徑為10%，浮動元素的上下外邊距為10px，因為預設是以外邊距為界限，所以此處形狀盒子的高度為120px，寬度仍然是100px，那麼通過計算後得到的參照值約等於110px，半徑就是11px，效果如下圖所示。

div {
  margin: 10px 0;
  shape-outside: circle(10%);
}

2）ellipse()

　　第二種是橢圓，與圓形類似，也需要定義半徑和圓點位置。只是它需要兩個半徑，第一個是橫軸半徑，第二個是縱軸半徑。在下面的示例中，浮動元素的寬為100px，高為60px，將浮動形狀宣告為橢圓，效果如下圖所示。

div {
  float: left;
  width: 100px;
  height: 60px;
  shape-outside: ellipse(50px 30px);
}

　　橫軸上的百分數半徑參照形狀盒子的寬度，縱軸上的百分數半徑參照形狀盒子的高度，下面定義的百分數半徑經過計算後得到的值為50px和40px，效果如下圖所示。

div {
  margin: 10px 0;
  shape-outside: ellipse(50% 50%);
}

3）inset()

　　第三種是嵌入在形狀盒子中的內部矩形，它能接收一組值，分別表示上右下左向內偏移的距離，還能接收一個可選的圓角，以round關鍵字分隔。

　　在下面的示例中，雖然只提供了兩個值，但CSS會根據現有的值確定其餘值，內部矩形距離形狀盒子的頂端和底端是20px，左右邊界是10px，形狀盒子的寬為100px，高為80px，效果如下圖所示。

div {
  float: left;
  width: 100px;
  height: 60px;
  margin: 10px 0;
  shape-outside: inset(20px 10px);
}

　　下面的樣式為內部矩形添加了20px的圓角，效果如下圖所示。

div {
  shape-outside: inset(20px 10px round 20px);
}

　　當內部矩形的偏移值是百分數時，左右偏移參照的是形狀盒子的寬，上下偏移參照的是其高。例如引數值為20%，那麼計算出的左右偏移值是20px，上下偏移值是16px，效果如下圖所示。

div {
  shape-outside: inset(20%);
}

4）polygon()

　　第四種是多邊形，它能接收一系列座標對，相對於形狀盒子的左上角計算，將所有的點連線起來就是最終的形狀。根據下面的polygon()函式中的四組座標可描繪出一個直角梯形，如下圖所示。

div {
  float: left;
  width: 100px;
  height: 80px;
  shape-outside: polygon(10px 10px, 20px 10px, 40px 50px, 10px 50px);
}

　　當座標是百分數時，橫座標參照形狀盒子的寬，縱座標參照其高，下面定義的座標，效果與上圖一致。

div {
  shape-outside: polygon(10% 12.5%, 20% 12.5%, 40% 62.5%, 10% 62.5%);
}

　　有一種簡便的方式建立多邊形，那就是使用Chrome的瀏覽器外掛：CSS Shapes Editor，用拖拽滑鼠的方式得到想要的多邊形，再將引數複製到樣式表中，如下圖所示。

三、影象

　　當形狀很複雜時，直接畫多邊形會非常麻煩，不過shape-outside屬性可基於影象的透明度（alpha值）來繪製形狀，即形狀輪廓會沿著非透明區域的邊緣生成。

　　例如有一個五角星，如果邊以外的地方都是透明的，那麼周圍的內容就會貼著五角星的邊，如下圖所示。

div {
  float: left;
  width: 100px;
  height: 100px;
  shape-outside: url(./star.png);
}

　　注意，url()函式中的影象不能直接從本地載入，必須從Web伺服器中讀取，如此引用的影象會有HTTP首部資訊，用於判斷是否跨域。

1）shape-image-threshold

　　該屬性可指定透明度閾值，修改形狀邊界，其取值範圍是0~1，值越小透明度越高。對於透明度低於該值的部分，會包含在浮動形狀中，而高於的則不包含。

　　例如將該值設為1時，就表示沒有浮動形狀，即整張影象都不在浮動形狀中，如下圖所示。

div {
  shape-image-threshold: 1;
}

2）shape-margin

　　該屬性可指定浮動形狀的外邊距。在下面的示例中會新增10px的外邊距，效果如下圖所示。

div {
  shape-margin: 10px;
}

　　注意，shape-margin屬性的百分數的計算方式與普通的外邊距相同，參照的也是包含塊的寬度。假設div元素的包含塊的寬度為220px，那麼10%的外邊距經過計算後得到的值為22px，效果如下圖所示。

div {
  shape-margin: 10%;
}

&n