circle() 函数在 CSS 中被归类为 <basic-shape> 数据类型，专门用于生成圆形形状并管理这些形状周围的文本环绕。
可能的值
<shape-radius> - 这可以表示为 <length>、<percentage> 或诸如最近侧和最远侧之类的值。
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>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success. <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>Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.Failure is the mother of success.<p>
</body>
</html>