ellipse()
CSS ellipse() funksiyasi x va y radiuslariga ega ellipsni belgilaydi.
ellipse() funksiyasi clip-path xususiyati va shape-outside xususiyati bilan ishlatiladi.
Misol
Rasmni x radiusi 50% va y radiusi 30% bo‘lgan ellips shaklida qirqing:
img {
clip-path: ellipse(50% 30%);
}
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 | |||||
|---|---|---|---|---|---|
| ellipse() | 37 | 79 | 54 | 10.1 | 24 |
CSS sintaksisi
ellipse(xy-radius at position)
| Qiymat | Tavsif |
|---|---|
| xy-radius | Majburiy. Ikkita radiusni — x va y ni belgilaydi. Bu quyidagi qiymatlardan biri bo‘lishi mumkin:
|
| at position | Ixtiyoriy. Ellips 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 x radiusi 50% va y radiusi 30% bo‘lgan ellips shaklida qirqing hamda ellips markazini o‘ng tomonga joylashtiring:
img {
clip-path: ellipse(50% 30% at right);
}
O‘zingiz sinab ko‘ring »
Misol
clip-path va ellipse() animatsiyasi:
#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%);}
}
O‘zingiz sinab ko‘ring »
Misol
ellipse(), clip-path va shape-outside’dan foydalanish:
img {
float: left;
clip-path: ellipse(50% 30%);
shape-outside: ellipse(55% 35%);
}
O‘zingiz sinab ko‘ring »
CSS ma’lumotnomasi: clip-path xususiyati.
CSS ma’lumotnomasi: shape-outside xususiyati.
CSS ma’lumotnomasi: circle() funksiyasi.
CSS ma’lumotnomasi: inset() funksiyasi.
CSS ma’lumotnomasi: polygon() funksiyasi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!