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>

打印页面