Đường viền W3.CSS
Tôi có biên giới.
Tôi chỉ có một đường viền bên trái.
Tôi có đường viền trên và dưới màu xanh lá cây.
Tôi có viền màu xanh.
Đường viền màu đỏ chuyển sang màu xanh lục khi di chuột.
Các lớp biên giới W3.CSS
W3.CSS cung cấp các lớp đường viền sau:
| Lớp học | Định nghĩa |
|---|---|
| đường viền w3 | Thêm đường viền (trên, phải, dưới, trái) vào một phần tử |
| w3-biên-top | Thêm đường viền trên cùng vào một phần tử |
| w3-biên-phải | Thêm đường viền bên phải vào một phần tử |
| w3-viền-đáy | Thêm đường viền dưới cùng vào một phần tử |
| w3-biên-trái | Thêm đường viền trái vào một phần tử |
| w3-biên giới-0 | Loại bỏ tất cả các đường viền |
| w3-viền- màu | Hiển thị đường viền theo một màu được chỉ định (như đỏ, xanh, v.v.) |
| w3-hover-border- màu | Thêm màu đường viền có thể di chuột |
| thanh dưới cùng w3 | Thêm đường viền dày phía dưới vào một phần tử |
| w3-thanh bên trái | Thêm đường viền dày bên trái vào một phần tử |
| w3-thanh bên phải | Thêm đường viền dày bên phải vào một phần tử |
| w3-topbar | Thêm đường viền dày trên cùng vào một phần tử |
Thêm đường viền
Các lớp w3-border được sử dụng để thêm đường viền cho bất kỳ phần tử HTML nào:
Tôi có biên giới.
Tôi chỉ có một đường viền bên trái.
Tôi có đường viền trên và dưới.
Ví dụ
<div class="w3-panel w3-border">
<p>I have borders.</p>
</div>
<div class="w3-panel w3-border-left">
<p>I have only a left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom">
<p>I have top and bottom borders.</p>
</div>
Hãy tự mình thử »Màu viền
Các lớp w3-border -color được sử dụng để thêm màu cho đường viền:
Tôi có viền màu đỏ.
Tôi có một đường viền bên trái màu xanh.
Tôi có đường viền trên và dưới màu xanh lá cây.
Tôi có đường viền bên trái màu đỏ và màu nền đỏ nhạt.
Ví dụ
<div class="w3-panel w3-border w3-border-red">
<p>I have red borders.</p>
</div>
<div class="w3-panel w3-border-left w3-border-blue">
<p>I have a blue left border.</p>
</div>
<div class="w3-panel w3-border-top w3-border-bottom w3-border-green">
<p>I have a green top and bottom border.</p>
</div> Hãy tự mình thử »Đường viền tròn
Để thêm đường viền tròn, hãy thêm một trong các lớp w3-round -size :
Tôi có đường viền bình thường.
Tôi có đường viền tròn nhỏ.
Tôi có đường viền tròn.
Tôi có đường viền tròn lớn.
Tôi có đường viền tròn xlarge.
Tôi có đường viền tròn xxlarge.
Ví dụ
<div class="w3-panel w3-border">
<p>My borders are normal.</p>
</div>
<div class="w3-panel w3-border w3-round-small">
<p>My borders are rounded (small).</p>
</div>
<div class="w3-panel
w3-border w3-round">
<p>My borders are rounded.</p>
</div>
<div class="w3-panel w3-border w3-round-large">
<p>I have
large rounded borders.</p>
</div>
<div class="w3-panel w3-border
w3-round-xlarge">
<p>I have xlarge rounded borders.</p>
</div>
<div class="w3-panel w3-border w3-round-xxlarge">
<p>I have
xxlarge rounded borders.</p>
</div>
Đường viền dày
Các lớp w3-topbar , w3-bottombar , w3-leftbar và w3-rightbar được sử dụng để thêm đường viền dày cho một phần tử:
Ví dụ
<div class="w3-panel w3-leftbar">
<p>I have a thick left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue">
<p>I have a thick blue left border.</p>
</div>
<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue">
<p>I have a thick blue left border and a pale-blue background color.</p>
</div>
<div class="w3-panel w3-topbar w3-bottombar w3-border-red w3-pale-red">
<p>I have a thick red top and bottom border and a pale-red background color.</p>
</div>
Biên giới có thể di chuột
Các lớp w3-hover-border- color thay đổi màu của đường viền khi di chuột qua:
Đường viền chuyển sang màu đỏ khi di chuột.
Đường viền màu đỏ chuyển sang màu xanh lục khi di chuột.
Ví dụ
<div class="w3-panel w3-border w3-hover-border-red">
<p>Border that turns red on hover</p>
</div>
<div class="w3-panel w3-border w3-border-red w3-hover-border-green">
<p>Red border that turns green on hover</p>
</div>
Hãy tự mình thử »Ví dụ
<div class="w3-panel w3-leftbar w3-border-white w3-hover-border-green">
<p>Thick (invisible) left border that turns green on hover.</p>
</div>
<div class="w3-panel w3-bottombar w3-border-white w3-hover-border-green">
<p>Thick (invisible) bottom border that turns green on hover.</p>
</div>
Đường viền dày màu trắng (vô hình) chuyển sang màu xanh lục khi di chuột.
Đường viền dày màu trắng (vô hình) chuyển sang màu đen khi di chuột.
Ví dụ
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
<p>Thick (invisible) border that turns green on hover.</p>
</div>
<div style="border:16px solid white" class="w3-panel w3-hover-border-black">
<p>Thick (invisible) border that turns black on hover.</p>
</div>
