CSS 函数 -circle（）

circle（） 函数在 CSS 中被归类为 <basic-shape> 数据类型，专门设计用于生成圆形并管理围绕这些形状的文本。

可能的值

<shape-radius> - 这可以表示为<length>, <percentage> 或最近边和最远边等值。
- closest-side - 它使用形状的中心与参考框最近的一侧之间的距离。在圆的情况下，这是指每个维度中最近的一侧。
- farthest-side - 它使用从形状中心到参考框最远一侧的距离。在圆的上下文中，这是指每个维度中最近的一侧。
<position> - 移动圆心，可以指定为<length>, <percentage>或关键字，如左。

语法


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>

打印本页