CSS circle() funktio

Määrittely ja käyttö

CSS: circle() Funktiot määrittelemään pyöreä, jolla on säde ja sijainti.

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

Esimerkki

Esimerkki 1

Leikkaa kuva pyöreäksi, jonka säde on 50%:

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

Kokeile itse

Esimerkki 2

Leikkaa kuva pyöreäksi, jonka säde on 50% ja keskipiste sijaitsee oikealla puolella:

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

Kokeile itse

Esimerkki 3

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

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

Kokeile itse

Esimerkki 4

Yhdistelmäkäyttö circle()jaclip-path ja shape-outside:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

Kokeile itse

CSS syntaksi

circle(radius Sijainti)

Tekninen yksityiskohta

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä funktiota.

Liittyvät sivut

Viittaukset:CSS clip-path ominaisuus

Viittaukset:CSS shape-outside -ominaisuus

Viittaukset:CSS ellipse() funktio

Viittaukset:CSS inset() funktio

Viittaukset:CSS polygon() funktio