Cột-quy tắc-kiểu - Thủ thuật CSS

Mục lục:

Anonim

Các column-rule-stylequy định cụ thể thuộc tính CSS gõ dòng đó là rút ra giữa các cột trong một bố cục CSS nhiều cột.

Tài sản là loại giới hạn của riêng nó. Khi chúng ta khai báo nó, nó sẽ vẽ một đường thẳng giữa các cột CSS rộng một pixel và màu đen.

.columns ( columns: 2 600px; column-rule-style: solid; )

Mọi thứ trở nên thú vị hơn khi chúng ta bắt đầu kết hợp column-rule-stylevới các column-rule-thuộc tính khác , bao gồm column-rule-width(để đặt đường kẻ dày hơn) và column-rule-color(để thay đổi màu sắc).

.columns ( columns: 2 600px; column-rule-style: solid; column-rule-width: 3px; column-rule-color: #f8a100; )

Hoặc, chúng ta có thể chỉ cần sử dụng thuộc tính tốc column-ruleký kết hợp cả ba trong một khai báo:

.columns ( columns: 2 600px; column-rule: solid 3px #f8a100; )

Cú pháp

column-rule-style: ;
  • Giá trị ban đầu: none
  • Áp dụng cho: vùng chứa nhiều cột
  • Kế thừa: không
  • Giá trị được tính: từ khóa được chỉ định
  • Loại hoạt ảnh: rời rạc

Giá trị

column-rule-style chấp nhận các giá trị sau:

/* Keyword values */ column-rule-style: none; column-rule-style: hidden; column-rule-style: dotted; column-rule-style: dashed; column-rule-style: solid; column-rule-style: double; column-rule-style: groove; column-rule-style: ridge; column-rule-style: inset; column-rule-style: outset; /* Global values */ column-rule-style: inherit; column-rule-style: initial; column-rule-style: unset;

Bản giới thiệu

Hỗ trợ trình duyệt

I E Cạnh Firefox Trình duyệt Chrome Safari Opera
10+ 12+ 3,5+ 4+ 3.2+ 11,5+
Chrome dành cho Android Android Firefox Trình duyệt Android iOS Safari Opera Mini
85+ 79+ Không 3.2+ Tất cả
Nguồn: caniuse

Sự chỉ rõ

Mô-đun bố cục nhiều cột CSS Cấp độ 1 (Bản nháp của người biên tập)