CSS-функция `circle()`

circle() CSS-функция задаёт круг с помощью радиуса и положения. Она относится к типу данных <basic-shape>.

Попробуйте

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%;
}

Синтаксис

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

Значения

<shape-radius>

Это может быть <length>, <percentage> или одно из следующих ключевых слов:

closest-side

Радиус — это расстояние от центра круга до ближайшей стороны опорного блока, при котором граница круга касается этой стороны.

farthest-side

Радиус — это расстояние от центра круга до самой дальней стороны опорного блока, при котором граница круга касается этой стороны.

closest-corner

Радиус — это расстояние от центра круга до ближайшего угла опорного блока, при котором граница круга проходит через этот угол.

farthest-corner

Радиус — это расстояние от центра круга до самого дальнего угла опорного блока, при котором граница круга проходит через этот угол.

<position>

Перемещает центр круга. Значением может быть <length>, <percentage> или, например, left. Если значение <position> не указано, по умолчанию используется центр.

Формальный синтаксис

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

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

<position> = 
  [ [ 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>

Примеры

Простой круг

В приведённом ниже примере свойство shape-outside имеет значение circle(50%), которое задаёт круг для плавающего элемента, обтекаемого текстом.

<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>

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

Интерактивный пример с ключевыми словами радиуса

Этот пример позволяет проверить, как перемещение центральной точки круга влияет на результат при использовании каждого из четырёх ключевых слов <shape-radius>.

HTML

Сначала в HTML задаются элементы управления для выбора ключевого слова радиуса и указания положения круга, а затем элемент <pre> для отображения значения clip-path, выбранного с помощью элементов управления. После этого добавляется элемент #support-note, который сообщает, если определённые ключевые слова радиуса не поддерживаются.

<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>

Затем в HTML задаётся несколько элементов <div>, используемых для отображения круга, опорного блока и маркера центра. Наиболее важные элементы — опорный блок (#refbox) и содержащийся в нём элемент .fill, которые задают градиент (как описано в следующем разделе о CSS). Для опорного блока в JavaScript задаётся clipPath, обрезающий градиент до круглой формы.

<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>

Обратите внимание: элементы .outline и .center-marker добавлены для того, чтобы было проще увидеть опорный блок и центр круга отсечения, которые иначе были бы невидимы. Элемент .outline должен находиться в разметке после #refbox: поскольку он сам не обрезается, его отрисовка после опорного блока гарантирует, что его пунктирная граница всегда будет поверх градиента .fill, даже если круг отсечения выходит за пределы опорного блока.

CSS

Ниже показан CSS для холста, опорного блока и элементов заливки. Обратите внимание: элемент .fill задаёт градиент, выходящий за пределы опорного блока и заполняющий большую часть холста. Этот градиент мы будем обрезать с помощью circle() (для этого в коде JavaScript динамически задаётся 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);
}

CSS для элементов управления и прочих элементов не показан, поскольку он не нужен для понимания метода circle(). Желающие могут посмотреть его в интерактивном примере.

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

Сначала получим ссылки на все элементы, используемые в примере.

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");

Затем определим функцию checkSupport(), которая проверяет поддержку каждого ключевого слова и включает или отключает соответствующие параметры выбора. Для проверки поддержки ключевых слов используется метод CSS.supports().

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;
    }
  }
}

Далее определим функцию update(), вызываемую при изменении элементов управления. Она задаёт путь отсечения опорного блока на основе выбранного ключевого слова и положения, а также перемещает маркер центра в соответствующее место.

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();

Результат

Измените положение центра круга и используемое ключевое слово, чтобы увидеть, как они влияют на результат. Обратите внимание: для вычисления круга отсечения используются опорный блок, выбранное ключевое слово радиуса и положение. Этот круг может выходить за пределы опорного блока (например, при использовании closest-corner или farthest-corner); градиент .fill намеренно больше опорного блока, чтобы полностью покрывать обрезаемый круг, как бы далеко он ни выходил за его границы.

Спецификации

Совместимость с браузерами

См. также

• Свойства, использующие этот тип данных: border-shape, clip-path, shape-outside
• Руководство по базовым фигурам