Ở bài viết hôm nay mình sẽ giới thiệu cho các bạn newbie về thuộc tính border và cách sử dụng của nó, các bạn nhớ ủng hộ nhé!
Border là gì?
Border hiểu đơn giản là một thuộc tính cơ bản trong CSS được sử dụng để tạo viền cho phần tử được chọn.Border sử dụng như thế nào?
Để thêm đường viền cho phần tử, bạn cần chỉ ra các tham số: size độ rộng đường viền, style kiểu đường viền (nét liền, đứt, chấm ...) và color màu đường.Thuộc tính border
Sử dụng 3 tham số size, style, color trên có thể được viết trên một dòng CSS với thuộc tính borderVí dụ:
<style> .vidu1{padding:15px;border:2px solid #069999} </style> <p class="vidu1">Ví dụ về đường viền</p>Kết quả:
Ví dụ về đường viền
Ở ví dụ đoạn CSS border:2px solid #069999 đã hiện ra đường viềnn có độ rộng 5px, kiểu đường liền, với mã màu là #069999.
Thuộc tính border-width, border-color, border-style
Ngoài cách viết đường viền theo thuộc tính border như trên, còn có thể sử dụng ba thuộc tính border-width, border-style, border-color để chỉ ra độ rộng, kiểu đường và màu sắc.Độ rộng đường là giá trị theo đơn vị px, em...
Màu sắc là các màu theo quy tắc CSS như màu theo tên, màu hash, màu RGB, rgba
Kiểu đường nhận các giá trị: none, dotted, dashed, double, groove, ridge, inset, outset, hidden
Ví dụ:
<style> p.none {border-style: none;} p.dotted {border-style: dotted;border-color: orangered;} p.dashed {border-width: 5px;border-color: green;border-style: dashed;} p.double {border-style: double;border-color: red;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} </style> <p class="none">Không kẻ khung.</p> <p class="dotted">Kiểu dotted.</p> <p class="dashed">Kiểu dashed.</p> <p class="double">Kiểu double.</p> <p class="groove">Kiểu grooved.</p> <p class="ridge">Kiểu ridged.</p> <p class="inset">Kiểu inset.</p> <p class="outset">Kiểu outset.</p> <p class="hidden">Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).</p>Kết quả:
Không kẻ khung.
Kiểu dotted.
Kiểu dashed.
Kiểu double.
Kiểu grooved.
Kiểu ridged.
Kiểu inset.
Kiểu outset.
Ẩn kẻ khung (khung không kẻ nhưng độ rộng phần tử vẫn có khung).
Đường viền theo từng cạnh
Cách viết ở phần trên tác động nên cả bốn cảnh của box, nếu muốn thiết lập cho từng cạnh của box bạn có thể sử dụng thêm thuộc tính.Thiết lập độ rộng, kiểu đường, màu sắc cho các thuộc tính: border-top, border-right, border-bottom, border-left.
Ví dụ:
<style> .vidu2 {border-top: 1px solid green;border-bottom: 2px dotted red;} </style> <p class="vidu2">Ví dụ kể viền trên dưới</p>
Ví dụ kể viền trên dưới
Tương tự như border-color, border-width, boder-style bạn cũng định nghĩa từng tham số màu, độ rộng, kiểu đường một cách riêng biệt cho từng cạnh với, với các thuộc tính:Tổng kết
Vậy là mình đã chỉ ra những thông tin về border và cách sử dụng của nó rồi. Chúc các bạn có một ngày vui vẻ, thanks for watching!Code được tham khảo từ một số nguồn khác nhau
Hello :v
Trả lờiXóa