CSS circle() fonksiyonu

Tanımı ve kullanımı

CSS'nin circle() Fonksiyonları kullanır ve bir yarıçap ve konum içeren bir daire tanımlar.

circle() Fonksiyonlar genellikle clip-path Özellikler ve shape-outside Özellikler birlikte kullanılır.

Örnek

Örnek 1

Resmi, yarıçapı 50% olan bir daireye kesin:

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

Kişisel olarak deneyin

Örnek 2

Resmi, yarıçapı 50% olan bir daireye kesin ve merkezini sağa konumlandırın:

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

Kişisel olarak deneyin

Örnek 3

Kullanarak clip-path ve circle() Animasyon etkisini gerçekleştirme:

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

Kişisel olarak deneyin

Örnek 4

birlikte kullanılır circle()veclip-path ve shape-outside:

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

Kişisel olarak deneyin

CSS dilbilgisi

circle(radius konumunda)

Teknik ayrıntılar

Tarayıcı desteği

Tabloda bulunan rakamlar, bu fonksiyonu tamamen destekleyen ilk tarayıcı sürümünü gösterir.

İlgili sayfa

Kaynakça：CSS clip-path özelliği

Kaynakça：CSS shape-outside özelliği

Kaynakça：CSS ellipse() fonksiyonu

Kaynakça：CSS inset() fonksiyonu

Kaynakça：CSS polygon() fonksiyonu