ellipse()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die ellipse()
CSS-Funktion ist eine der <basic-shape>
- Datentypen.
Probieren Sie es aus
Syntax
shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);
Eine Ellipse ist im Grunde ein zusammengedrückter Kreis, daher verhält sich ellipse()
sehr ähnlich wie circle()
, mit dem Unterschied, dass zwei Radien, x und y, angegeben werden müssen.
Werte
<shape-radius>
-
Zwei Radien, x und y in dieser Reihenfolge. Diese können eine
<length>
, ein<percentage>
oder die Werteclosest-side
undfarthest-side
sein.closest-side
-
Verwendet die Länge vom Zentrum der Form zur nächstgelegenen Seite des Referenzrahmens. Für Ellipsen ist dies die nächstgelegene Seite in der Radiusdimension.
farthest-side
-
Verwendet die Länge vom Zentrum der Form zur entferntesten Seite des Referenzrahmens. Für Ellipsen ist dies die entfernteste Seite in der Radiusdimension.
<position>
-
Verschiebt das Zentrum der Ellipse. Kann eine
<length>
, ein<percentage>
oder ein Wert wieleft
sein. Der<position>
-Wert ist standardmäßig "center", falls er weggelassen wird.
Formale Syntax
<ellipse()> =
ellipse( <radial-size>? [ at <position> ]? )
<radial-size> =
<radial-extent> |
<length [0,∞]> |
<length-percentage [0,∞]>{2}
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<radial-extent> =
closest-corner |
closest-side |
farthest-corner |
farthest-side
<length-percentage> =
<length> |
<percentage>
Beispiele
Grundlegendes Beispiel für ellipse()
Dieses Beispiel zeigt eine Ellipse, die links schwebt. Sie hat einen horizontalen Radius von 40%, einen vertikalen Radius von 50% und eine Position links. Dies bedeutet, dass sich das Zentrum der Ellipse am linken Rand des Rahmens befindet, was uns eine halbe Ellipsenform gibt, um unseren Text herumzuströmen. Klicken Sie auf "Play" in den Codeblöcken, um diese Werte zu ändern und zu sehen, wie sich die Ellipse verändert:
<div class="box">
<div class="shape"></div>
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery. Before that night—a memorable night,
as it was to prove—hundreds of millions of people had watched the rising
smoke-wreaths of their fires without drawing any special inspiration from
the fact.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.shape {
float: left;
shape-outside: ellipse(40% 50% at left);
margin: 20px;
width: 100px;
height: 200px;
}
Verwendung von closest-side / farthest-side Werten
Die Schlüsselwortwerte closest-side
und farthest-side
sind nützlich, um schnell eine Ellipse basierend auf der Größe des schwebenden Element-Referenzrahmens zu erstellen.
<div class="box">
<div class="shape"></div>
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery. Before that night—a memorable night,
as it was to prove—hundreds of millions of people had watched the rising
smoke-wreaths of their fires without drawing any special inspiration from
the fact.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.shape {
float: left;
shape-outside: ellipse(closest-side farthest-side at 30%);
margin: 20px;
width: 100px;
height: 140px;
}
Spezifikationen
Specification |
---|
CSS Shapes Module Level 1 # funcdef-basic-shape-ellipse |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ellipse() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Eigenschaften, die diesen Datentyp verwenden:
clip-path
,shape-outside
- Leitfaden zu grundlegenden Formen