CSS 函式 -circle()

circle() 函式在 CSS 中被歸類為 <basic-shape> 資料型別，專門用於生成圓形形狀並管理文字環繞這些形狀。

可能的值

<shape-radius> - 可以表示為 <length>、<percentage> 或諸如 closest-side 和 farthest-side 之類的值。

closest-side - 使用形狀中心與參考框最近一側之間的距離。對於圓形，這指的是每個維度中最接近的一側。
farthest-side - 使用形狀中心與參考框最遠一側之間的距離。對於圓形，這指的是每個維度中最接近的一側。(原文有誤，應是指最遠一側)

<position> - 移動圓形的中心，可以指定為 <length>、<percentage> 或關鍵字，例如 left。

語法

circle() = circle( [<shape-radius>]? [at <position>]? )
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

CSS circle() - 文字圍繞圓形流動

在下面的示例中，circle() 函式用於定義文字圍繞圓形流動的圓形形狀。

該函式設定一個帶有半徑的圓形，建立一個圓形區域，文字內容圍繞該區域環繞。
此形狀也用作剪裁路徑，以確保內容保持在圓形邊界內。

<html>
<head>
<style>
   .circle-demo {
      width: 200px;
      height: 200px;
      background-color: #ebf21b;
      border-radius: 50%;
      float: left;
      margin-right: 25px;
      shape-outside: circle(45%);
      clip-path: circle();
   }
</style>
</head>
<body>
<div class="circle-demo"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum. <p>
</body>
</html>

CSS circle() - 圓形定位

以下示例演示了使用 circle() 函式定位文字。

這裡 CSS shape-outside: circle(220px at 10px 80px); 在座標 (10px, 80px) 處生成一個半徑為 220 畫素的圓形。
這會在指定的 div 元素內建立文字圍繞所述圓形邊框流動的視覺效果。

<html>
<head>
<style>
   div {  
      float: left;
      width: 300px;
      height: 250px;
      shape-outside: circle(220px at 10px 80px);
      background: lightgray;
   }
</style>
</head>
<body>
<div></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, velit vel bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum, velit velit bibendum bibendum.<p>
</body>
</html>

列印頁面