W3.CSS yumaloq burchaklar
Yumaloq burchaklar
W3.CSS har qanday HTML elementga yumaloq burchaklar qo‘shish uchun klasslarni taqdim etadi.
Yumaloq burchaklarni konteynerlar, kartochkalar, tugmalar, rasmlar va boshqa elementlarda ishlatish mumkin.
Round klasslari
w3-round klasslari elementga yumaloq burchaklar qo‘shadi.
| Klass | Radius |
|---|---|
w3-round-small |
2px |
w3-round |
4px |
w3-round-medium |
4px |
w3-round-large |
8px |
w3-round-xlarge |
16px |
w3-round-xxlarge |
32px |
w3-round va w3-round-medium ikkalasi ham 4px radiusdan foydalanadi.
Yumaloq burchaklarni taqqoslash
Burchaklar qanchalik yumshoq ko‘rinishini istashingizga qarab round klassini tanlang.
w3-round-small
w3-round
w3-round-large
w3-round-xlarge
w3-round-xxlarge
Misol
<div class="w3-panel w3-blue w3-round-small">...</div>
<div class="w3-panel w3-blue w3-round">...</div>
<div class="w3-panel w3-blue w3-round-large">...</div>
<div class="w3-panel w3-blue w3-round-xlarge">...</div>
<div class="w3-panel w3-blue w3-round-xxlarge">...</div>
O‘zingiz sinab ko‘ring »
Yumaloq burchakli kartochkalar
Round klasslarini kartochkalar, chegaralar va ranglar bilan birlashtirish mumkin.
Mountain Trip
Explore mountains, lakes, and beautiful landscapes.
Misol
<div class="w3-card w3-round-large">
<div class="w3-container">
<h2>Mountain Trip</h2>
<p>Explore mountains, lakes, and beautiful landscapes.</p>
<p><button class="w3-button w3-blue w3-round">Learn More</button></p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Yumaloq tugmalar
Round klasslari tugmalar shaklini o‘zgartirishi mumkin.
Misol
<button class="w3-button w3-blue">Normal</button>
<button class="w3-button w3-blue w3-round">Round</button>
<button class="w3-button w3-blue w3-round-large">Large</button>
<button class="w3-button w3-blue w3-round-xxlarge">XXLarge</button>
O‘zingiz sinab ko‘ring »
Yumaloq burchakli rasmlar
Round klasslarini to‘g‘ridan-to‘g‘ri rasmlarga ham qo‘llash mumkin.
Circle klassi
w3-circle klassi elementni doira shakliga keltiradi.
Mukammal doira hosil bo‘lishi uchun elementning kengligi va balandligi bir xil bo‘lishi kerak.
Profil rasmlari
w3-circle klassi profil rasmlari va avatarlar uchun qulay.
John Doe
Web Designer
Misol
<img src="img_avatar3.png" class="w3-circle" alt="Avatar" style="width:120px">
O‘zingiz sinab ko‘ring »
Doira ichidagi matn
W3.CSS
Text inside a circle
Misol
<div class="w3-padding-32 w3-red w3-circle w3-center">
<h2>W3.CSS</h2>
<p>Text inside a circle</p>
</div>
O‘zingiz sinab ko‘ring »
Doira ichidagi doira
Dekorativ shakllar yaratish uchun round klasslarini birlashtirish mumkin.
Hello
W3.CSS!
Misol
<div class="w3-padding-32 w3-green w3-circle">
<div class="w3-padding w3-red w3-circle w3-center">
<p>Hello W3.CSS!</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!