W3.CSS รอบชั้นเรียน
w3-รอบ-เล็ก
w3-รอบ
w3-รอบ-ขนาดใหญ่
w3-รอบ-xlarge
w3-round-xxlarge
คลาส ขนาดw3-round- เพิ่มมุมโค้ง มนให้กับองค์ประกอบ HTML ใดๆ:
ระดับ | กำหนด |
---|---|
w3-รอบ | องค์ประกอบโค้งมน (รัศมีขอบ) 4px |
w3-รอบ-เล็ก | องค์ประกอบโค้งมน (รัศมีขอบ) 2px |
w3-รอบ-กลาง | องค์ประกอบโค้งมน (รัศมีขอบ) 4px |
w3-รอบ-ขนาดใหญ่ | องค์ประกอบโค้งมน (รัศมีขอบ) 8px |
w3-รอบ-xlarge | องค์ประกอบโค้งมน (รัศมีขอบ) 16px |
w3-round-xxlarge | องค์ประกอบโค้งมน (รัศมีขอบ) 32px |
ตัวอย่าง
<div class="w3-round w3-teal">w3-round</div>
The Circle Class
คลาส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>