&emsp;&emsp;CSS規范新增了一個模塊：CSS Shapes，shape-outside屬性屬于該模塊，它能影響浮動元素周邊內容流的形狀（即浮動形狀），可接收三類值：形狀盒子、函數和圖像。 ## 一、形狀盒子 &emsp;&emsp;形狀盒子（shape box）會指定形狀的邊界，既能單獨使用，也能與另外兩類值組合使用，可選的關鍵字如下所列，其中margin-box是shape-outside屬性的默認值。 &emsp;&emsp;（1）margin-box：以外邊距為界。 &emsp;&emsp;（2）border-box：以邊框為界。 &emsp;&emsp;（3）padding-box：以內邊距為界。 &emsp;&emsp;（4）content-box：以內容為界。 &emsp;&emsp;下圖演示了四種形狀盒子的效果，外邊距、邊框和內邊距都設為了10px，代碼中只列出了關鍵樣式，并只舉了其中的一種情況。 ~~~html <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> ~~~ :-:  ## 二、函數 &emsp;&emsp;有4個形狀函數可供選擇，分別是circle()、ellipse()、inset()以及polygon()。 **1）circle()** &emsp;&emsp;第一種是圓形，可定義半徑和圓點位置，例如浮動元素的寬高都為100px，圓的半徑為50px，樣式如下所示，效果如下圖所示，其中白色邊框的圓就是計算出的浮動形狀。 ~~~css div { float: left; width: 100px; height: 100px; shape-outside: circle(50px); } ~~~ :-:  &emsp;&emsp;接下來指定圓點的位置，需要使用at關鍵字將半徑和位置分隔。在下面的樣式中，圓點處在元素的右上角，注意觀察下圖中的浮動形狀，它超出了元素的邊界，超出部分默認會被裁剪掉。 ~~~CSS div { shape-outside: circle(50px at right top); } ~~~ :-:  &emsp;&emsp;當用百分數指定半徑時，需要有個參照值，該值得通過下面的公式計算得到，其中width是形狀盒子的寬，height是其高。 :-:  &emsp;&emsp;假設半徑為10%，浮動元素的上下外邊距為10px，因為默認是以外邊距為界限，所以此處形狀盒子的高度為120px，寬度仍然是100px，那么通過計算后得到的參照值約等于110px，半徑就是11px，效果如下圖所示。 ~~~CSS div { margin: 10px 0; shape-outside: circle(10%); } ~~~ :-:  **2）ellipse()** &emsp;&emsp;第二種是橢圓，與圓形類似，也需要定義半徑和圓點位置。只是它需要兩個半徑，第一個是橫軸半徑，第二個是縱軸半徑。在下面的示例中，浮動元素的寬為100px，高為60px，將浮動形狀聲明為橢圓，效果如下圖所示。 ~~~CSS div { float: left; width: 100px; height: 60px; shape-outside: ellipse(50px 30px); } ~~~ :-:  &emsp;&emsp;橫軸上的百分數半徑參照形狀盒子的寬度，縱軸上的百分數半徑參照形狀盒子的高度，下面定義的百分數半徑經過計算后得到的值為50px和40px，效果如下圖所示。 ~~~CSS div { margin: 10px 0; shape-outside: ellipse(50% 50%); } ~~~ :-:  **3）inset()** &emsp;&emsp;第三種是嵌入在形狀盒子中的內部矩形，它能接收一組值，分別表示上右下左向內偏移的距離，還能接收一個可選的圓角，以round關鍵字分隔。 &emsp;&emsp;在下面的示例中，雖然只提供了兩個值，但CSS會根據現有的值確定其余值，內部矩形距離形狀盒子的頂端和底端是20px，左右邊界是10px，形狀盒子的寬為100px，高為80px，效果如下圖所示。 ~~~CSS div { float: left; width: 100px; height: 60px; margin: 10px 0; shape-outside: inset(20px 10px); } ~~~ :-:  &emsp;&emsp;下面的樣式為內部矩形添加了20px的圓角，效果如下圖所示。 ~~~CSS div { shape-outside: inset(20px 10px round 20px); } ~~~ :-:  &emsp;&emsp;當內部矩形的偏移值是百分數時，左右偏移參照的是形狀盒子的寬，上下偏移參照的是其高。例如參數值為20%，那么計算出的左右偏移值是20px，上下偏移值是16px，效果如下圖所示。 ~~~CSS div { shape-outside: inset(20%); } ~~~ :-:  **4）polygon()** &emsp;&emsp;第四種是多邊形，它能接收一系列坐標對，相對于形狀盒子的左上角計算，將所有的點連接起來就是最終的形狀。根據下面的polygon()函數中的四組坐標可描繪出一個直角梯形，如下圖所示。 ~~~CSS div { float: left; width: 100px; height: 80px; shape-outside: polygon(10px 10px, 20px 10px, 40px 50px, 10px 50px); } ~~~ :-:  &emsp;&emsp;當坐標是百分數時，橫坐標參照形狀盒子的寬，縱坐標參照其高，下面定義的坐標，效果與上圖一致。 ~~~CSS div { shape-outside: polygon(10% 12.5%, 20% 12.5%, 40% 62.5%, 10% 62.5%); } ~~~ &emsp;&emsp;有一種簡便的方式創建多邊形，那就是使用Chrome的瀏覽器插件：CSS Shapes Editor，用拖拽鼠標的方式得到想要的多邊形，再將參數復制到樣式表中，如下圖所示。 :-:  ## 三、圖像 &emsp;&emsp;當形狀很復雜時，直接畫多邊形會非常麻煩，不過shape-outside屬性可基于圖像的透明度（alpha值）來繪制形狀，即形狀輪廓會沿著非透明區域的邊緣生成。 &emsp;&emsp;例如有一個五角星，如果邊以外的地方都是透明的，那么周圍的內容就會貼著五角星的邊，如下圖所示。 ~~~CSS div { float: left; width: 100px; height: 100px; shape-outside: url(./star.png); } ~~~ :-:  注意，url()函數中的圖像不能直接從本地加載，必須從Web服務器中讀取，如此引用的圖像會有HTTP首部信息，用于判斷是否跨域。 **1）shape-image-threshold** &emsp;&emsp;該屬性可指定透明度閾值，修改形狀邊界，其取值范圍是0~1，值越小透明度越高。對于透明度低于該值的部分，會包含在浮動形狀中，而高于的則不包含。 &emsp;&emsp;例如將該值設為1時，就表示沒有浮動形狀，即整張圖像都不在浮動形狀中，如下圖所示。 ~~~CSS div { shape-image-threshold: 1; } ~~~ :-:  **2）shape-margin** &emsp;&emsp;該屬性可指定浮動形狀的外邊距。在下面的示例中會添加10px的外邊距，效果如下圖所示。 ~~~CSS div { shape-margin: 10px; } ~~~ :-:  &emsp;&emsp;注意，shape-margin屬性的百分數的計算方式與普通的外邊距相同，參照的也是包含塊的寬度。假設div元素的包含塊的寬度為220px，那么10%的外邊距經過計算后得到的值為22px，效果如下圖所示。 ~~~CSS div { shape-margin: 10%; } ~~~ :-:  ***** > 原文出處： [博客園-CSS躬行記](https://www.cnblogs.com/strick/category/1667864.html) [知乎專欄-CSS躬行記](https://zhuanlan.zhihu.com/pwcss) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。