From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/column-rule/index.html | 125 +++++++++++++++++++++++++++++ 1 file changed, 125 insertions(+) create mode 100644 files/zh-cn/web/css/column-rule/index.html (limited to 'files/zh-cn/web/css/column-rule') diff --git a/files/zh-cn/web/css/column-rule/index.html b/files/zh-cn/web/css/column-rule/index.html new file mode 100644 index 0000000000..be4a2b55d9 --- /dev/null +++ b/files/zh-cn/web/css/column-rule/index.html @@ -0,0 +1,125 @@ +--- +title: column-rule +slug: Web/CSS/column-rule +tags: + - CSS + - CSS 多列布局 + - CSS 属性 +translation_of: Web/CSS/column-rule +--- +
{{CSSRef("CSS Multi-columns")}}
+ +
{{EmbedInteractiveExample("pages/css/column-rule.html")}}
+ +

概述

+ +

在多列布局中，column-rule 属性规定了列与列之间的直线，也称“规则”。该简写可以避免单独设置各个 column-rule-* 属性：{{Cssxref("column-rule-width")}}，{{Cssxref("column-rule-style")}} 和 {{Cssxref("column-rule-color")}}。

+ +

{{cssinfo}}

+ +

语法

+ +
Formal syntax: {{csssyntax("column-rule")}}
+
+ +
column-rule: dotted;
+column-rule: solid blue;
+column-rule: solid 8px;
+column-rule: thick inset blue;
+
+ +

取值

+ +

column-rule 属性可以按任何顺序指定为下面列出的一个，两个或三个值。

+ +
+
<'column-rule-width'> 
+
定义为 {{cssxref("<length>")}} 或是 thin，medium，thick 关键字的其中一个。请参阅 {{cssxref("border-width")}} 。
+
<'column-rule-style'>
+
请参阅 {{cssxref("border-style")}}。
+
<'column-rule-color'>
+
一个 {{cssxref("<color>")}} 值。
+
+ +

示例

+ +
p.foo { column-rule: dotted; }          /* 与 "medium dotted currentColor" 相同 */
+p.bar { column-rule: solid blue; }      /* 与 "medium solid blue" 相同 */
+p.baz { column-rule: solid 8px; }       /* 与 "8px solid currentColor" 相同 */
+p.abc { column-rule: thick inset blue; }
+
+ +

运行实例

+ +
+

padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;

+
+ +

规范

+ + + + + + + + + + + + + + + + +
规范状态说明
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}}
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix('-webkit')}}3.5 (1.9.1){{property_prefix('-moz')}}1011.13.0 (522){{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
-- cgit v1.2.3-54-g00ecf