فئات W3.CSS المستديرة
w3-round-small
w3-round
w3- دائري كبير
w3-round-x- كبير
w3 الجولة xxlarge
تضيف فئات w3-round- size زوايا مستديرة لأي عنصر HTML:
| فصل | يعرّف |
|---|---|
| w3-round | عنصر مدور (نصف قطر الحدود) 4 بكسل |
| w3-round-small | عنصر مدور (نصف قطر الحدود) 2 بكسل |
| w3-round-متوسط | عنصر مدور (نصف قطر الحدود) 4 بكسل |
| w3- دائري كبير | العنصر مدور (نصف قطر الحدود) 8 بكسل |
| w3-round-x- كبير | العنصر مدور (نصف قطر الحدود) 16 بكسل |
| w3 الجولة xxlarge | عنصر مدور (نصف قطر الحدود) 32 بكسل |
مثال
<div class="w3-round w3-teal">w3-round</div>
فئة الدائرة
تعرض فئة w3-Circle المحتوى داخل دائرة.
صورة داخل دائرة
مثال
<img class="w3-circle"
src="img_car.jpg" alt="Car">
Text Inside a Circle
Text inside a circle
Example
<div class="w3-padding-32 w3-red w3-circle w3-center">
<h1>The
w3-circle Class</h1>
</div>
A Circle Inside a Circle
Hello
W3.CSS!
Example 1
<div class="w3-padding-32 w3-green w3-circle">
<img src="img_car.jpg"
class="w3-circle" style="width:75%">
</div>
Example 2
<div class="w3-padding-32 w3-green w3-circle">
<div
class="w3-padding-32 w3-red w3-circle w3-center" style="width:55%">
<p class="w3-xlarge">Hello<br>W3.CSS!</p>
</div>
</div>