Função ellipse() do CSS

Definição e uso

CSS ellipse() A função define uma elipse com dois raios x e y.

ellipse() Funções geralmente usadas com clip-path Atributos e shape-outside Atributos usados juntos.

Exemplo

Exemplo 1

Cortar a imagem para uma elipse com raio x de 50% e raio y de 30%:

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

Experimente você mesmo

Exemplo 2

Cortar a imagem para uma elipse com raio x de 50% e raio y de 30%, e posicionar o centro da elipse à direita:

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

Experimente você mesmo

Exemplo 3

Usar clip-path e ellipse() Realizar efeito de animação:

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

Experimente você mesmo

Exemplo 4

usados conjuntamente ellipse()、clip-path e shape-outside:

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

Experimente você mesmo

Sintaxe do CSS

ellipse(xy-radius na posição)

Detalhes técnicos

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente essa função pela primeira vez.

Páginas relacionadas

Referência:Propriedade clip-path CSS

Referência:A propriedade CSS shape-outside

Referência:Função circle() do CSS

Referência:Função inset() do CSS

Referência:Função polygon() do CSS