Funkcja CSS ellipse()

Definicja i użycie

CSS ellipse() Funkcja definiuje elipsę o dwóch promieniach x i y.

ellipse() Funkcje zwykle używane z clip-path Atrybuty i shape-outside Atrybuty używać razem.

Przykład

Przykład 1

Przytnij obraz do elipsy o promieniu x 50%, promieniu y 30%:

img {
  clip-path: ellipse(50% 30%);
}

Spróbuj sam

Przykład 2

Przytnij obraz do elipsy o promieniu x 50%, promieniu y 30% i umieść środek elipsy po prawej stronie:

img {
  clip-path: ellipse(50% 30% at right);
}

Spróbuj sam

Przykład 3

używać clip-path i ellipse() Wyzwalanie efektu animacji:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: ellipse(80% 50%);
}
@keyframes mymove {
  50% {clip-path: ellipse(30% 10%);}
}

Spróbuj sam

Przykład 4

łącznie używać ellipse(),clip-path i shape-outside:

img {
  float: left;
  clip-path: ellipse(50% 30%);
  shape-outside: ellipse(55% 35%);
}

Spróbuj sam

Gramatyka CSS

ellipse(xy-radius w pozycji)

Szczegóły techniczne

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Strony związane

Odniesienie:CSS właściwość clip-path

Odniesienie:Atrybut shape-outside w CSS

Odniesienie:Funkcja CSS circle()

Odniesienie:Funkcja inset() w CSS

Odniesienie:Funkcja polygon() w CSS