Thuộc tính column-rule trong CSS dùng để quy định chiều rộng, kiểu, màu sắc cho đường kẻ phân chia các cột trong bố cục có nhiều cột, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính column-rule trong CSS

Chức năng của Thuộc tính column-rule trong CSS

Thuộc tính column-rule trong CSS dùng để quy định chiều rộng, kiểu, màu sắc cho đường kẻ phân chia các cột trong bố cục có nhiều cột.

Cú pháp của Thuộc tính column-rule trong CSS

column-rule: column-rule-width column-rule-style column-rule-color

column-rule-width: Chiều rộng của đường kẻ (ví dụ: 1px, 5px)

column-rule-style: kiểu đường kẻ (dotted, dashed, solid, double, groove, ridge, inset, outset)

column-rule-color: Màu sắc (#ddd, red)

Code Thuộc tính column-rule trong CSS

column-rule: 1px solid #ddd; Độ rộng 1px, kiểu solid, màu #ddd(xám)

column-rule: 5px double red; Độ rộng 5px, kiểu double, màu red(đỏ)

column-rule: 5px dashed red; Độ rộng 5px, kiểu dashed, màu red(đỏ)

<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính column-rule trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{width:100%; height:auto; margin-bottom:10px; column-count: 3; column-gap: 40px;}
</style>
</head>
<body>

<h1>Code Thuộc tính column-rule trong CSS</h1>
<p>column-rule: column-rule-width column-rule-style column-rule-color</p>

<h4>column-rule: 1px solid #ddd; Độ rộng 1px, kiểu solid, màu #ddd(xám)</h4>
<div class="divcha" style="column-rule: 1px solid #ddd;">
   Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>

<h4>column-rule: 5px double red; Độ rộng 5px, kiểu double, màu red(đỏ)</h4>
<div class="divcha" style="column-rule: 5px double red;">
   Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>

<h4>column-rule: 5px dashed red; Độ rộng 5px, kiểu dashed, màu red(đỏ)</h4>
<div class="divcha" style="column-rule: 5px dashed red;">
   Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả, Hãy Chạy thử Code Thuộc tính column-rule trong CSS, Web Mới cung cấp công cụ giúp bạn chạy trực tiếp code và xem kết quả
</div>

</body>
</html>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính column-rule trong CSS.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thuộc tính column-rule trong CSS
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn