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/paint-order/index.html | 99 ++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 files/zh-cn/web/css/paint-order/index.html (limited to 'files/zh-cn/web/css/paint-order') diff --git a/files/zh-cn/web/css/paint-order/index.html b/files/zh-cn/web/css/paint-order/index.html new file mode 100644 index 0000000000..4683868cb1 --- /dev/null +++ b/files/zh-cn/web/css/paint-order/index.html @@ -0,0 +1,99 @@ +--- +title: paint-order +slug: Web/CSS/paint-order +translation_of: Web/CSS/paint-order +--- +
{{CSSRef}}{{seecompattable}}
+ +

CSS  paint-order  属性可以让你控制文本区域和图形绘制的填充和绘制（和markers）的顺序

+ +

语法

+ +
/*默认 */
+paint-order: normal;
+
+/* 单一属性 */
+paint-order: stroke; /* 先描边, 然后填充,markers*/
+paint-order: markers; /* 先绘制markers, 然后填充，描边 */
+
+/* 多属性 */
+paint-order: stroke fill; /* 先描边，然后填充，然后markers */
+paint-order: markers stroke fill; /* 先 markers, 然后 stroke, 然后 fill */
+
+
+ +

如果没有指定值，默认顺序将是 fill, stroke, markers.

+ +

当只指定一个值的时候，这个值将会被首先渲染，然后剩下的两个值将会以默认顺序渲染，当只指定两个值的时候，这两个值会以指定的顺序渲染，接着渲染剩下的未指定的那个。

+ +
+

注意：在这个属性的值当中，markers 只有当在绘制SVG图形时引用了 marker-*属性（例如 marker-start）和 <marker> 元素才能进行控制。他们不适用于HTML文本，所以，这样的话，你只能决定  stroke 和 fill 的顺序。

+
+ +

属性值

+ +
+
normal
+
用正常的顺序渲染不同的元素
+
stroke,
+ fill,
+
markers
+
指定一部分或者全部这些属性的渲染顺序
+
+ +

正式语法

+ +
{{csssyntax}}
+ +

使用示例

+ +

HTML

+ +
<p>Stroke in front</p>
+
+<p class="stroke-behind">Stroke behind</p>
+ +

CSS

+ +
p {
+  font-family: sans-serif;
+  font-size: 5rem;
+  font-weight: bold;
+  margin: 0;
+  -webkit-text-stroke: 5px red;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}
+ +

效果

+ +

{{EmbedLiveSample('Examples', '100%', 165)}}

+ +

说明

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}}{{Spec2('SVG2')}}Initial definition
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +

{{Compat("css.properties.paint-order")}}

-- cgit v1.2.3-54-g00ecf