CSS3 column-rule-style 屬性

CSS column-rule-style屬性用於在多列布局中指定列與列之間經過column rule屬性設置的分隔線的樣式。column-rule是列與列之間的一條垂直分隔線,你可使用column-rule-width屬性來設置分隔線的寬度,使用column-rule-color屬性來設置分隔線的顏色,使用column-rule-style屬性來設置分隔線的線條樣式。css

.瀏覽器支持

 

.語法

 column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

.參數

  • none:不顯示列與列之間的分隔線。設置的分隔線寬度和顏色屬性會被忽略。
  • hidden:不顯示列與列之間的分隔線。設置的分隔線寬度和顏色屬性會被忽略。
  • dotted:列之間的分隔線顯示爲圓角的矩形。圓角的半徑等於分隔線寬度的一半。
  • dashed:列之間的分隔線顯示爲直角矩形組成的虛線。
  • solid:列之間的分隔線顯示爲一條筆直的直線。
  • double:列之間的分隔線顯示爲兩條直線,兩條直線之間有一些間隙。兩條直線的寬度和間隙寬度的總和等於column-rule-width屬性指定的寬度。
  • groove:列之間的分隔線顯示爲內陷浮雕效果。
  • ridge:列之間的分隔線顯示爲外凸浮雕效果。
  • inset:列之間的分隔線顯示爲內斜面效果。
  • outset:列之間的分隔線顯示爲外斜面效果。

  column-rule-style屬性的初始值爲nonehtml

 

.應用範圍

  column-rule-style屬性能夠應用在全部多列布局的元素上。瀏覽器

 

    在一個元素應用column-rule-style屬性的代碼以下佈局

.columns {
    columns: 12em;
    column-rule-width: 5px;
     column-rule-style: solid;
    column-rule-color: #0099CC;
}                             
相關文章
相關標籤/搜索