首頁 > web前端 > css教學 > css column-rule-width屬性怎麼用

css column-rule-width屬性怎麼用

silencement
發布: 2019-05-27 16:47:18
原創
3322 人瀏覽過

css column-rule-width屬性怎麼用

css column-rule-width屬性定義及用法

在css中,column-rule-width屬性是用在多列佈局元素中,用來設定列與列之間分割線的寬度。通常與column-count、column-rule-style等多列佈局屬性一起使用,使用它的前提條件是,透過column-count、column等屬性定義了多列佈局,並且設定了列與列之間的分割樣式(如:column-rule-style屬性定義了分割線),單獨使用column-rule-width屬性是沒有效果的;

css column-rule-width屬性語法格式

css語法:column-rule-width: thin / medium / thick / length;(例:column-rule-width: 16px;)

JavaScript語法:object.style.columnRuleWidth= "18px"

css column-rule-width屬性值說明

thin:細的分隔線

medium:中等的分隔線

thick :粗的分隔線

length:自訂寬度的分隔線(如:12px)

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 column-rule-width属性设置列之间分割线的宽度笔记</title>
<style type="text/css">
body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;margin-top:10px;: ;}
.thin{column-count:3;column-rule-style:solid;column-rule-width:thin;}
.thick{column-count:3;column-rule-style:solid;column-rule-width:thick;}
.length{column-count:3;column-rule-style:solid;column-rule-width:8px;}
</style>
</head>
<body>
<div class="thin">column-rule-width:thin;演示,设置细分割线。这是为了演示效果多写的</div>
<div class="thick">column-rule-width:thick;演示,设置粗分割线。这是为了演示效果多写的</div>
<div class="length">column-rule-width:8px;,设置分割线的宽度为8px。这是为了演示效果多写的</div>
</body>
</html>
登入後複製

運行結果

css column-rule-width屬性怎麼用

以上是css column-rule-width屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板