[CSS] 使用 shape-outside 來設定文繞圖的效果

以往平面設計時可以設計文字繞著圖片編排的文繞圖效果，現在在 CSS 也能夠做到了，以下就用範例來說明。

首先我們先放一個區塊，並讓他 float: left，這樣文字就會繞著區塊走而不會只有一排，這也就是傳統的文繞圖的設定，但以前只能夠在區塊的矩形範圍外，像這樣。

.shape{
  background: pink;
  width: 200px;
  height: 200px;
  float: left;
}

circle()

接著在這個區塊，就可以使用 shape-outside 來設定形狀文繞圖，這邊先設定圓形的形狀：

.shape{
  background: pink;
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: circle(50%);
}

就會看到文字繞著圓形的形狀環繞。

shape-outside 可以加上 at 後調整形狀的中心點，像是：

.shape{
  background: pink;
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: circle(60% at 0% 0%);
}

這樣形狀的圓心就會變成在區塊的左上角：

此外還可以設定以下幾種形狀：

ellipse()

.shape{
  background: pink;
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: ellipse(50px 100px);
}

polygon()

polygon() 裡可以設定多個座標點，會連成形狀，注意至少要三個點才會形成形狀。

.shape{
  background: pink;
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%);
}

inset()

inset() 可以設定四個邊往內縮的值。

.shape{
  background: pink;
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: inset(20px 20px 20px 20px);
}

url()

url() 可以指定圖片的網址，所以如果替同一張圖片設定 url() 就可以做到文繞圖的效果了。

.shape{
  background: pink;
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: url("https://i.imgur.com/EiEQ1UY.png");
}

如果覺得圖片跟文字距離太近，可以加上 shape-margin 指定間距：

.shape{
  background: pink;
  width: 200px;
  height: 200px;
  float: left;
  shape-outside: url("https://i.imgur.com/EiEQ1UY.png");
  shape-margin: 10px
}