`circle()` CSS-Funktion

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die circle() CSS Funktion definiert einen Kreis unter Verwendung eines Radius und einer Position. Sie ist einer der <basic-shape> Datentypen.

Probieren Sie es aus

clip-path: circle(50px);

clip-path: circle(6rem at right center);

clip-path: circle(10% at 2rem 90%);

clip-path: circle(closest-side at 5rem 6rem);

clip-path: circle(farthest-side);

clip-path: circle(closest-corner at 70% 70%);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#default-example {
  background: #ffee99;
}

#example-element {
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
  width: 100%;
  height: 100%;
}

Syntax

css

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

Werte

<shape-radius>

Dies kann eine <length>, ein <percentage>, oder einer der folgenden Schlüsselwortwerte sein:

closest-side: Der Radius ist die Länge vom Mittelpunkt des Kreises zur nächstgelegenen Seite der Referenzbox, sodass die Grenze des Kreises genau diese Seite berührt.
farthest-side: Der Radius ist die Länge vom Mittelpunkt des Kreises zur entferntesten Seite der Referenzbox, sodass die Grenze des Kreises genau diese Seite berührt.
closest-corner: Der Radius ist die Länge vom Mittelpunkt des Kreises zur nächstgelegenen Ecke der Referenzbox, sodass die Grenze des Kreises durch diese Ecke verläuft.
farthest-corner: Der Radius ist die Länge vom Mittelpunkt des Kreises zur entferntesten Ecke der Referenzbox, sodass die Grenze des Kreises durch diese Ecke verläuft.

<position>

Verschiebt den Mittelpunkt des Kreises. Kann eine <length>, ein <percentage> oder ein Wert wie left sein. Der <position>-Wert wird auf center gesetzt, wenn er weggelassen wird.

Formale Syntax

<circle()> = 
  circle( <radial-size>? [ at <position> ]? )  

<radial-size> = 
  <radial-extent>               |
  <length [0,∞]>                |
  <length-percentage [0,∞]>{2}  

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<radial-extent> = 
  closest-corner   |
  closest-side     |
  farthest-corner  |
  farthest-side    

<length-percentage> = 
  <length>      |
  <percentage>  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}

Beispiele

Einfacher Kreis

Im untenstehenden Beispiel hat die Eigenschaft shape-outside den Wert circle(50%), wodurch ein Kreis auf einem umflossenen Element definiert wird, um den der Text herumfließt.

html

<div class="box">
  <img
    alt="A hot air balloon"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <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>

css

body {
  font: 1.2em / 1.5 sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
}

Interaktives Beispiel für Radius-Schlüsselwörter

Dieses Beispiel ermöglicht es Ihnen, die Wirkung der Verschiebung des Kreismittelpunktes zu testen, wenn eines der vier <shape-radius>-Schlüsselwörter verwendet wird.

HTML

Das HTML definiert zunächst Steuerungen zur Auswahl eines gewählten Radius-Schlüsselwortes und zur Festlegung der Position, an der der Kreis angezeigt werden soll, gefolgt von einem <pre>-Element zur Anzeige des clip-path, das die Steuerungswerte auswählen. Danach wird ein #support-note-Element bereitgestellt, um anzuzeigen, wann bestimmte Radius-Schlüsselwörter nicht unterstützt werden.

html

<div class="controls">
  <div class="controls-row">
    <label>
      Shape radius:
      <select id="radius-keyword">
        <option value="closest-side">closest-side</option>
        <option value="closest-corner">closest-corner</option>
        <option value="farthest-side">farthest-side</option>
        <option value="farthest-corner" selected>farthest-corner</option>
      </select>
    </label>
  </div>
  <div class="controls-row">
    <label>
      Position X:
      <input type="range" id="pos-x" min="0" max="200" value="120" />
    </label>
    <label>
      Position Y:
      <input type="range" id="pos-y" min="0" max="120" value="40" />
    </label>
  </div>
</div>

<pre id="declaration"></pre>

<p id="support-note"></p>

Das HTML definiert dann eine Anzahl von <div>-Elementen, die verwendet werden, um den Kreis, die Referenzbox und den Mittelpunkt-Marker darzustellen. Die wichtigsten Elemente sind die Referenzbox (#refbox) und das darin enthaltene .fill-Element, die den gezeichneten Verlauf definieren (wie im folgenden CSS-Abschnitt erörtert). Ein clipPath wird im JavaScript auf die Referenzbox gesetzt, um diesen Verlauf zu einer kreisförmigen Form zu begrenzen.

html

<div class="canvas">
  <div class="refbox" id="refbox">
    <div class="fill"></div>
  </div>
  <div class="outline"></div>
  <div class="center-marker" id="center-marker"></div>
</div>

Beachten Sie, dass die .outline und .center-marker bereitgestellt werden, um das Erkennen der Referenzbox und des Kresimittelpunktes zu erleichtern, die ansonsten unsichtbar wären. Das .outline-Element muss nach #refbox im Markup platziert werden: Da es selbst nicht abgeschnitten ist, bedeutet das Zeichnen nach der Referenzbox, dass sein gestrichelter Rahmen immer über dem .fill-Verlauf gerendert wird, auch wenn der beschneidende Kreis über die Referenzbox hinausgeht.

CSS

Das CSS für das Canvas, die Referenzbox und die Füllelemente wird unten gezeigt. Beachten Sie, dass das .fill einen Verlauf definiert, der die Referenzbox überläuft, den größten Teil des Canvas füllt. Dies ist der Verlauf, den wir mit dem circle() beschneiden (wir tun dies, indem wir den CSS-Clip-Pfad dynamisch in unserem JavaScript-Code setzen).

css

.canvas {
  position: relative;
  width: 640px;
  height: 480px;
  overflow: hidden;
  border: 1px solid #888888;
}

.refbox {
  position: absolute;
  top: 180px;
  left: 220px;
  width: 200px;
  height: 120px;
  box-sizing: border-box;
}

.fill {
  position: absolute;
  inset: -240px;
  background: linear-gradient(to bottom right, #ff5522, #0055ff);
}

Das CSS für die Steuerungs- und andere Elemente wird nicht gezeigt, da es nicht erforderlich ist, um die circle()-Methode zu verstehen. Interessierte Leser können es sich im Beispiel-Spielplatz ansehen.

body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.controls-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.outline {
  position: absolute;
  top: 180px;
  left: 220px;
  width: 200px;
  height: 120px;
  box-sizing: border-box;
}

.outline {
  border: 3px dashed #e6007a;
  pointer-events: none;
}

.center-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  border: 2px solid black;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#declaration {
  margin: 0;
}

#support-note {
  margin: 0;
  color: #b3001b;
}

JavaScript

Zuerst holen wir uns Verweise auf jedes der im Beispiel verwendeten Elemente.

const select = document.getElementById("radius-keyword");
const posX = document.getElementById("pos-x");
const posY = document.getElementById("pos-y");
const refbox = document.getElementById("refbox");
const declaration = document.getElementById("declaration");
const marker = document.getElementById("center-marker");
const supportNote = document.getElementById("support-note");

Dann definieren wir die checkSupport()-Funktion, die verwendet wird, um zu testen, ob jedes Radius-Schlüsselwort unterstützt wird, und die zugehörigen Auswahloptionen aktiviert/deaktiviert. Dies verwendet die CSS.supports()-Methode, um die Unterstützung von Schlüsselwörtern zu überprüfen.

function checkSupport() {
  const unsupported = [];
  for (const option of select.options) {
    if (!CSS.supports("clip-path", `circle(${option.value} at 0px 0px)`)) {
      option.disabled = true;
      option.textContent += " (not supported)";
      unsupported.push(option.value);
    }
  }
  if (unsupported.length > 0) {
    supportNote.textContent = `Your browser doesn't support: ${unsupported.join(", ")}.`;
  }
  if (select.selectedOptions[0]?.disabled) {
    const firstSupported = [...select.options].find(
      (option) => !option.disabled,
    );
    if (firstSupported) {
      select.value = firstSupported.value;
    }
  }
}

Als nächstes definieren wir eine update()-Funktion, die immer dann aufgerufen wird, wenn die Eingabesteuerungen geändert werden. Diese setzt den Clip-Pfad auf der Referenzbox basierend auf dem ausgewählten Schlüsselwort und der Position und bewegt den Mittelpunkt-Marker entsprechend.

function update() {
  const keyword = select.value;
  const x = Number(posX.value);
  const y = Number(posY.value);

  // Build the clip-path value and apply it to the reference box
  const value = `circle(${keyword} at ${x}px ${y}px)`;
  refbox.style.clipPath = value;

  // Update the displayed declaration text and marker position
  declaration.textContent = `clip-path: ${value};`;
  marker.style.left = `${refbox.offsetLeft + x}px`;
  marker.style.top = `${refbox.offsetTop + y}px`;
}

select.addEventListener("change", update);
posX.addEventListener("input", update);
posY.addEventListener("input", update);
checkSupport();
update();

Ergebnis

Ändern Sie die Position des Kreismittelpunktes und das verwendete Schlüsselwort, um deren relative Auswirkungen zu sehen. Beachten Sie, dass die Referenzbox zusammen mit dem ausgewählten Radius-Schlüsselwort und der Position verwendet wird, um den beschneidenden Kreis zu berechnen. Dieser Kreis kann über die Referenzbox hinausgehen (zum Beispiel mit closest-corner oder farthest-corner); der .fill-Verlauf ist bewusst größer als die Referenzbox bemessen, sodass er immer den gesamten beschnittenen Kreis vollständig abdeckt, egal wie weit er sich erstreckt.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Eigenschaften, die diesen Datentyp verwenden: border-shape, clip-path, shape-outside
Leitfaden zu Grundformen

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

circle() CSS-Funktion

HTML

CSS

JavaScript

Ergebnis

Help improve MDN

`circle()` CSS-Funktion