circle()
CSS circle() funksiyasi radius va joylashuvga ega aylanani belgilaydi.
circle() funksiyasi clip-path xususiyati va shape-outside xususiyati bilan ishlatiladi.
Misol
Rasmni 50% radiusli aylana shaklida qirqing:
img {
clip-path: circle(50%);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| circle() | 37 | 79 | 54 | 10.1 | 24 |
CSS sintaksisi
circle(radius at position)
| Qiymat | Tavsif |
|---|---|
| radius | Majburiy. Aylana radiusini belgilaydi. Bu quyidagi qiymatlardan biri bo‘lishi mumkin:
|
| at position | Ixtiyoriy. Aylana markazini belgilaydi. Bu uzunlik yoki foiz qiymati bo‘lishi mumkin. Shuningdek, left, right, top yoki bottom kabi qiymat ham bo‘lishi mumkin. Standart qiymat — center |
| Versiya: | CSS Shape moduli, 1-daraja |
|---|
Ko‘proq misollar
Misol
Rasmni 50% radiusli aylana shaklida qirqing va aylana markazini o‘ngga joylashtiring:
img {
clip-path: circle(50% at right);
}
O‘zingiz sinab ko‘ring »
Misol
clip-path va circle() animatsiyasi:
#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%);}
}
O‘zingiz sinab ko‘ring »
Misol
circle(), clip-path va shape-outside’dan foydalanish:
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: clip-path xususiyati.
CSS ma’lumotnomasi: shape-outside xususiyati.
CSS ma’lumotnomasi: ellipse() funksiyasi.
CSS ma’lumotnomasi: inset() funksiyasi.
CSS ma’lumotnomasi: polygon() funksiyasi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!