CSS รูปแบบกำหนดระหว่างคอลัมน์

Definition and usage

The column-rule-style property specifies the style rule between columns.

See also:

CSS3 tutorial:CSS3 สองคอลัมน์

HTML DOM reference manual:columnRuleStyle property

Example

Set the color rule between columns:

div {
  column-rule-style: dotted;
}

Try it yourself

There are more examples at the bottom of the page.

CSS syntax

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

Attribute value

Value Description Test
none Define no rule. Test
hidden Define hidden rule. Test
dotted Define dotted line rule. Test
dashed Define dashed line rule. Test
solid Define solid line rule. Test
double Define double line rule. Test
groove Define 3D grooved rule. The effect depends on the width and color values. Test
ridge Define 3D ridged rule. The effect depends on the width and color values. Test
inset Define 3D inset rule. The effect depends on the width and color values. Test
outset Define 3D outset rule. The effect depends on the width and color values. Test

Technical details

Default value: none
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.columnRuleStyle="dotted"

ตัวอย่างเพิ่มเติม

Column-count
แบ่งข้อความใน element div ออกเป็นสามคอลัมน์。
Column-gap
แบ่งข้อความใน element div ออกเป็นสามคอลัมน์ และวางระหว่างทางยกถัดกัน 30 pixel。
Column-rule
กำหนดความกว้าง、รูปแบบและสีระหว่างคอลัมน์。

การสนับสนุนโปรแกรมน่าเชื่อถือ

ตัวเลขในตารางบ่งชี้เวอร์ชันแรกที่สนับสนุนคุณสมบัติทั้งหมด。

จำแนกเลขที่ -webkit- หรือ -moz- ในตัวเลขหมายถึงสำเนียงแรกที่ใช้คำเรียกดูเฉพาะ。

Chrome IE / Edge Firefox Safari Opera
50.0
4.0 -webkit-		 10.0 52.0
2.0 -moz-		 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1