Thuộc tính column-rule trong CSS được dùng để chỉ định độ rộng, kiểu và màu của đường kẻ giữa các cột.
Cú pháp:
column-rule: column-rule-width column-rule-style column-rule-color|
initial|inherit;
Giá trị thuộc tính:
- column-rule-width: Giá trị này dùng để đặt độ rộng của đường kẻ giữa các cột. Giá trị mặc định của thuộc tính này là medium.
- column-rule-style: Giá trị này dùng để đặt kiểu của đường kẻ giữa các cột. Giá trị mặc định của thuộc tính này là none.
- column-rule-color: Giá trị này dùng để đặt màu của đường kẻ giữa các cột. Giá trị mặc định là màu của phần tử.
- initial: Giá trị này dùng để đặt giá trị mặc định cho thuộc tính column-rule này.
- inherit: Giá trị này yêu cầu thuộc tính column-rule kế thừa thuộc tính từ phần tử cha.
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>The column-rule Property</title>
<style>
.gfg {
-webkit-column-count: 3;
-moz-column-count: 3 column-count: 3;
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
-webkit-column-rule: 4px double #ff00ff;
-moz-column-rule: 4px double #ff00ff;
column-rule: 4px double #ff00ff;
}
h1 {
color: green;
}
h1,
h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h2>
The column-rule Property
</h2>
<p>
The column-rule property sets the width, style,
and color of the rule between the columns of
the element:
</p>
<div class="gfg">
The course is designed for students
as well as working professionals to prepare
for coding interviews. This course is going
to have coding questions from school level
to the level needed for product based companies
like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
Đầu ra:
Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi column-rule Property đượ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
- Opera: 11.1 trở lên
- Safari: 9.0 trở lên