ellipse()

Базовая Широко распространённая

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Функция ellipse() CSS является одним из <basic-shape> типов данных.

Попробовать

Синтаксис

shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);

Эллипс представляет собой по сути сжатый круг, и поэтому ellipse() работает очень похоже на circle(), за исключением того, что нам нужно указать два радиуса x и y.

Значения

<shape-radius>

Два радиуса, x и y в таком порядке. Они могут быть <length>, <percentage> или значениями closest-side и farthest-side.

closest-side: Использует длину от центра фигуры до ближайшей стороны опорной области. Для эллипсов это ближайшая сторона в направлении радиуса.
farthest-side: Использует длину от центра фигуры до самой удалённой стороны опорной области. Для эллипсов это самая удалённая сторона в направлении радиуса.

<position>

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

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

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

Примеры

Пример базового эллипса()

Этот пример показывает эллипс, сдвинутый влево, с горизонтальным радиусом 40%, вертикальным радиусом 50% и смещением влево. Это означает, что центр эллипса находится на левом краю области, что даёт нам форму полуэллипса для обтекания текста. Нажмите «Запустить» в блоках кода, чтобы изменить эти значения и увидеть, как меняется эллипс:

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

Использование значений closest-side / farthest-side

Ключевые слова closest-side и farthest-side полезны для быстрого создания эллипса на основе размера опорной области сдвинутого элемента.

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

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

Спецификация
CSS Shapes Module Level 1 # funcdef-basic-shape-ellipse

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`ellipse`	37	79	54	24	10.1	37	54	24	10.3	3.0	37

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/ellipse