circle()

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 circle() CSS-Funktion definiert einen Kreis anhand eines Radius und einer Position. Sie ist eine der <basic-shape> Datentypen.

Probieren Sie es aus

Syntax

css
shape-outside: circle(50%);
clip-path: circle(6rem at 12rem 8rem);

Werte

<shape-radius>

Dies kann eine <length>, ein <percentage> oder die Werte closest-side und farthest-side sein.

closest-side

Verwendet die Länge vom Zentrum der Form bis zur nächsten Seite des Referenzrahmens. Bei Kreisen ist dies die nächstgelegene Seite in jeder Dimension.

farthest-side

Verwendet die Länge vom Zentrum der Form bis zur entferntesten Seite des Referenzrahmens. Bei Kreisen ist dies die entfernteste Seite in jeder Dimension.

<position>

Bewegt das Zentrum des Kreises. Kann eine <length>, ein <percentage>, oder ein Wert wie left sein. Der <position>-Wert wird standardmäßig auf die Mitte gesetzt, wenn er weggelassen wird.

Formale Syntax

<circle()> = 
  circle( <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

Einfacher Kreis

Im untenstehenden Beispiel hat die Eigenschaft shape-outside den Wert circle(50%), was einen Kreis auf einem gefloateten Element definiert, um den der Text fließt.

Spezifikationen

Specification
CSS Shapes Module Level 1
# funcdef-basic-shape-circle

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch