CSS ellipse() funktio

Määrittely ja käyttö

CSS:n ellipse() Funktio määrittää kaksi säteetä x ja y omaavan ellipsin.

ellipse() Funktiot yleensä käytetään clip-path Ominaisuudet ja shape-outside Ominaisuudet yhdessä käytettynä.

Esimerkki

Esimerkki 1

Leikkaa kuva x-säteeksi 50% ja y-säteeksi 30% olevaksi ellipsiksi:

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

Kokeile itse

Esimerkki 2

Leikkaa kuva x-säteeksi 50% ja y-säteeksi 30% olevaksi ellipsiksi ja sijoita ellipsin keskipiste oikealle:

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

Kokeile itse

Esimerkki 3

Käytä clip-path ja ellipse() Toteuta animaatioefekti:

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

Kokeile itse

Esimerkki 4

yhdessä käytettynä ellipse()、clip-path ja shape-outside:

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

Kokeile itse

CSS syntaksi

ellipse(xy-radius sijainti)

Tekninen yksityiskohta

Selaimen tuki

Taulukossa olevat numerot merkitsevät ensimmäistä selainta, joka täysin tukee tätä funktiota.

Liittyvät sivut

Viittaukset:CSS clip-path ominaisuus

Viittaukset:CSS shape-outside -ominaisuus

Viittaukset:CSS circle() funktio

Viittaukset:CSS inset() funktio

Viittaukset:CSS polygon() funktio