Thuộc tính column-rule-width trong CSS dùng để thay đổi độ rộng của đường kẻ cột. Đường kẻ cột là các đường thẳng dọc giữa các cột.
Cú pháp:
column-rule-width: length|thin|medium|thick|initial|inherit;
Giá trị mặc định: medium
Giá trị thuộc tính:
- thin: Dùng để thiết lập một đường kẻ mỏng giữa các cột.
- medium: Dùng để tạo một đường kẻ có độ rộng trung bình giữa các cột. Đây là độ rộng mặc định.
- thick: Tạo một đường kẻ có độ rộng lớn giữa các cột.
- length: Dùng để thiết lập độ rộng bằng một giá trị độ dài. Giá trị này không được âm.
- initial: Dùng để thiết lập thuộc tính
column-rule-widthvề giá trị mặc định. - inherit: Thuộc tính này được kế thừa từ phần tử cha của nó.
Ví dụ: Dưới đây là một ví dụ về thuộc tính đã được giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<title>
column-rule-width property
</title>
<!-- column-rule-width CSS property -->
<style>
.length {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: 10px;
text-align: justify;
}
.thin {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: thin;
text-align: justify;
}
.thick {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: thick;
text-align: justify;
}
.medium {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: medium;
text-align: justify;
}
.initial {
column-count: 3;
column-rule: solid green;
column-gap: 40px;
column-rule-width: initial;
text-align: justify;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<!-- column-rule-width: length; property -->
<h2>column-rule-width: length;</h2>
<div class="length">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: thin; property -->
<h2>column-rule-width: thin;</h2>
<div class="thin">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: thick; property -->
<h2>column-rule-width: thick;</h2>
<div class="thick">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: medium; property -->
<h2>column-rule-width: medium;</h2>
<div class="medium">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
<!-- column-rule-width: initial; property -->
<h2>column-rule-width: initial;</h2>
<div class="initial">
Prepare for the Recruitment drive of product
based companies like Microsoft, Amazon, Adobe
etc with a free online placement preparation
course. The course focuses on various MCQ's
& Coding question likely to be asked in the
interviews & make your upcoming placement
season efficient and successful.
</div>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính column-rule-width được liệt kê dưới đây:
- Google Chrome 50.0 trở lên
- Edge 12.0 trở lên
- Internet Explorer 10.0 trở lên
- Firefox 52.0 trở lên
- Safari 9.0 trở lên
- Opera 11.1 trở lên