CSS 函数 - ellipse（）

椭圆可以被认为是一个扭曲的圆，CSS ellipse（）函数的工作原理类似于 circle（）函数。

但是，在 ellipse（） 的情况下，必须指定水平（x）和垂直（y）半径。

可能的值

<shape-radius> - 此序列中需要两个半径 x 和 y。这些值可以指定为 <length>、<percentage>，或使用 closest-side 和 farthest-side 等关键字。
closest-side - 使用形状中心与参考框最近一侧之间的距离。在椭圆的情况下，这是指沿半径维度最近的一侧。
farthest-side - 使用从形状中心到参考框最外侧的距离。在省略号的上下文中，这是指最远的一侧。
<position> - 移动椭圆的中心。可以是<length>, <percentage>或关键字（如左侧和右侧）。如果未指定任何内容，则默认情况下，<位置>设置为中心点。

语法


ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

CSS ellipse（） - 基本示例

以下示例演示了 ellipse（） 与 shape-outside 属性的工作原理。


<html>
<head>
<style>
	 	.ellipse-container {
	 	 	 float: left;
	 	 	 width: 280px;
	 	 	 height: 250px;
	 	 	 shape-outside: ellipse(45% 40%);
	 	 	 background: lightblue;	
	 	}
</style>
</head>
<body>
<div class="ellipse-container"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur. Nullam viverra suscipit massa, sit amet lobortis quam sollicitudin sed. Sed nec eros et risus ullamcorper commodo. In hac habitasse platea dictumst.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur. Sed nec eros et risus ullamcorper commodo. In hac habitasse platea dictumst.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur.</p>
</body>
</html>

CSS ellipse（） - 定位椭圆

在以下示例中，ellipse（） CSS 函数用于使用 clip-path 和 shape-outside 属性创建椭圆。


<html>
<head>
<style>
	 	.ellipse-demo {
	 	 	 width: 300px;
	 	 	 height: 200px;
	 	 	 text-align: center;
	 	 	 font-size:15px;
	 	 	 background-color: lightgray;
	 	 	 clip-path: ellipse(50% 50% at 50% 50%);
	 	 	 shape-outside: ellipse(100% 60% at left);
	 	 	 float: left;
	 	 	 margin-right: 20px;
	 	}
	 	.content {
	 	 	 margin-top: 20px;
	 	}
</style>
</head>
<body>
	 	<h1>Elliptical Text Wrapping Example</h1>
	 	<div class="ellipse-demo"></div>
	 	<div class="content">
	 	 	 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at lectus augue. Sed vel semper libero. Integernec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
	 	 	 <p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
	 	</div>
</body>
</html>

打印本页