CSS中的column-rule-width屬性用於更改列規則的寬度,即列之間的垂直線。
用法:
column-rule-width:length|thin|medium|thick|initial|inherit;
屬性值:
- thin:它用於在列之間設置精簡規則。
- medium:它用於在列之間創建中等寬度的規則。這是默認寬度。
- thick:它在列之間創建一個粗細寬度規則。
- length:用於按長度設置寬度。它不取負值。
- initial:它用於將column-rule-width屬性設置為其默認值。
- inherit:此屬性是從其父級繼承的。
例:
<!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>
輸出:
支持的瀏覽器:下麵列出了column-rule-width屬性支持的瀏覽器:
- Google Chrome 50.0、4.0 -webkit-
- Internet Explorer 10.0
- Firefox 52.0、2.0 -moz-
- Safari 9.0、3.1 -webkit-
- Opera 37.0、15.0 -webkit-,11.1
相關用法
- HTML Style columnRuleWidth用法及代碼示例
- CSS transition-property用法及代碼示例
- CSS nav-up用法及代碼示例
- CSS right屬性用法及代碼示例
- CSS nav-right用法及代碼示例
- CSS nav-down用法及代碼示例
- CSS top屬性用法及代碼示例
- CSS all屬性用法及代碼示例
- CSS column-gap用法及代碼示例
- CSS filter屬性用法及代碼示例
- CSS transform屬性用法及代碼示例
- HTML DOM id用法及代碼示例
- CSS direction屬性用法及代碼示例
- CSS z-index用法及代碼示例
- CSS content屬性用法及代碼示例
注:本文由純淨天空篩選整理自Husban大神的英文原創作品 CSS | column-rule-width Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。