گرد کردن گوشه ها
w3-round-small
w3-round
w3-round-large
w3-round-xlarge
w3-round-xxlarge
w3-round-jumbo
کلاس های w3-round-size گوشه های گرد به هر عنصر HTML می افزایند:
| Class | Defines |
|---|---|
| w3-round | عنصر گرد شده (border-radius) به اندازه 4px |
| w3-round-small | عنصر گرد شده (border-radius)به اندازه 2px |
| w3-round-medium | عنصر گرد شده (border-radius) به اندازه 4px |
| w3-round-large | عنصر گرد شده (border-radius) به اندازه 8px |
| w3-round-xlarge | عنصر گرد شده(border-radius)به اندازه 16px |
| w3-round-xxlarge | عنصر گرد شده (border-radius) به اندازه 32px |
| w3-round-jumbo | عنصر گرد شده (border-radius)به اندازه 64px |
کلاس دایره ای
با استفاده از کلاس w3-circle می توانید درون یک محتوا را گرد نمایش دهید.
یک تصویردرون یک دایره
متون درون دایره
متن درون دایره
مثال
<div class="w3-padding-32 w3-red w3-circle w3-center">
<h1>The w3-circle Class</h1>
</div>
خودتان امتحان کنيد »<h1>The w3-circle Class</h1>
</div>
یک دایره درون یک دایره دیگر
سلام
W3.CSS!
مثال 1
<div class="w3-padding-32 w3-green w3-circle">
<img src="/img_car.jpg" class="w3-circle" style="width:75%">
</div>
خودتان امتحان کنيد »<img src="/img_car.jpg" class="w3-circle" style="width:75%">
</div>
مثال 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>
خودتان امتحان کنيد »<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>
- نوشته شده توسط زهرا داوودی
- بازدید: 4461
دیدگاه‌ها
سلام با عرض خسته نباشید میخواستم بپرسم میشه w3.css و bootstrap را در کنار هم تو یه پروژه استفاده کرد؟
سلام، بله می توان w3.css و bootstrap را همزمان استفاده نمود. در صفحه جاری به همین صورت عمل شده است.