CSS column-rule

admin發表於2019-05-28
CSS

column-rule屬性用來規定列與列之間的邊框樣式，有點類似於border屬性，複合屬性。

與border不同的是，它只作用於兩列之間的位置，且不佔用任何空間。

關於多列布局的總體介紹參閱CSS columns 多列布局一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
column-rule:<column-rule-width> || <column-rule-style> || <column-rule-color>

屬性值解析:

（1）.column-rule-width：規定邊框的寬度，預設值是medium”。

（2）.column-rule-style：規定邊框的樣式，其預設值為“none”。

（3）.column-rule-color：規定邊框的顏色，其預設值為前景色color的值，可以設定其為透明。

關於瀏覽器支援度本文不作介紹，具體可以http://www.caniuse.com/網站查詢。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.columns {
  border: 1px solid #ccc;
  width: 400px;
  font-size:14px;
  margin: 20px auto;
  
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
  
  -moz-column-rule: 2px solid blue;
  -webkit-column-rule: 2px solid blue;
  column-rule: 2px solid blue;
}
</style>
</head>
<body>
<div class="columns">
螞蟻部落前端致力於分享前端基礎與進階知識，運營已經有四年有餘。
名字"螞蟻部落"源於小團隊崇尚奮鬥與努力，也認識到，一個人再強，力量也是微薄的，就像一隻小螞蟻，但是如果團結起來，則會產生巨大的力量，再強調一點，我們不崇尚996，但是我們崇尚個人自由選擇的努力與奮鬥。教程內容大多數是螞蟻部落團隊根據自己的開發經驗與應用體會精心撰寫，希望能夠打造一款適合於前端初學者或者需要從初學進階的朋友的精品教程。當然內容難免會存在一些瑕疵或者不當之處，很多螞蟻部前端的網友給予了熱心的指正，本站也會在第一時間進行了修正。
今天螞蟻部落前端公眾號正式開啟，以後會持續分享與前端相關的知識點或者程式設計師生活相關的話題，與大家進行進一步的交流，感謝大家的支援。
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/135407yz2cv33hg9aryt9i.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼非常的簡單，不多進行分析，再來看一段程式碼示例：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.columns {
  border: 1px solid #ccc;
  width: 400px;
  font-size:14px;
  margin: 20px auto;
  
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2;
  
  -moz-column-rule: 40px solid blue;
  -webkit-column-rule: 40px solid blue;
  column-rule: 40px solid blue;
}
</style>
</head>
<body>
<div class="columns">
螞蟻部落前端致力於分享前端基礎與進階知識，運營已經有四年有餘。
名字"螞蟻部落"源於小團隊崇尚奮鬥與努力，也認識到，一個人再強，力量也是微薄的，就像一隻小螞蟻，但是如果團結起來，則會產生巨大的力量，再強調一點，我們不崇尚996，但是我們崇尚個人自由選擇的努力與奮鬥。教程內容大多數是螞蟻部落團隊根據自己的開發經驗與應用體會精心撰寫，希望能夠打造一款適合於前端初學者或者需要從初學進階的朋友的精品教程。當然內容難免會存在一些瑕疵或者不當之處，很多螞蟻部前端的網友給予了熱心的指正，本站也會在第一時間進行了修正。
今天螞蟻部落前端公眾號正式開啟，以後會持續分享與前端相關的知識點或者程式設計師生活相關的話題，與大家進行進一步的交流，感謝大家的支援。
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201905/28/135441xkffqooe8oqe8l6q.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此邊框不佔據任何的空間，也可以隨意向兩端擴充套件，並不會改變其他相關屬性。

相關文章