Lớp học vòng W3.CSS
w3-tròn-nhỏ
vòng w3
w3-tròn-lớn
w3-vòng-xlarge
w3-round-xxlarge
Các lớp w3-round -size thêm các góc tròn vào bất kỳ phần tử HTML nào:
Lớp học | Định nghĩa |
---|---|
vòng w3 | Phần tử được làm tròn (bán kính đường viền) 4px |
w3-tròn-nhỏ | Phần tử được làm tròn (bán kính đường viền) 2px |
w3-vòng-trung bình | Phần tử được làm tròn (bán kính đường viền) 4px |
w3-tròn-lớn | Phần tử được làm tròn (bán kính đường viền) 8px |
w3-vòng-xlarge | Phần tử được làm tròn (bán kính đường viền) 16px |
w3-round-xxlarge | Phần tử được làm tròn (bán kính đường viền) 32px |
Lớp vòng tròn
Lớp w3-circle hiển thị nội dung bên trong một vòng tròn.
Một hình ảnh bên trong một vòng tròn
Văn bản bên trong một vòng tròn
Văn bản bên trong một vòng tròn
Ví dụ
<div class="w3-padding-32 w3-red w3-circle w3-center">
<h1>The
w3-circle Class</h1>
</div>
Hãy tự mình thử »Một vòng tròn Bên trong một vòng tròn
Xin chào
W3.CSS!
ví dụ 1
<div class="w3-padding-32 w3-green w3-circle">
<img src="img_car.jpg"
class="w3-circle" style="width:75%">
</div>
Hãy tự mình thử »Ví dụ 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>
Hãy tự mình thử »