语法
css
/* Normal */
paint-order: normal;
/* Single values */
paint-order: stroke; /* draw the stroke first, then fill and markers */
paint-order: markers; /* draw the markers first, then fill and stroke */
/* Multiple values */
paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */
paint-order: markers stroke fill; /* draw markers, then stroke, then fill */
/* Global values */
paint-order: inherit;
paint-order: initial;
paint-order: revert;
paint-order: revert-layer;
paint-order: unset;
如果未指定任何值，则默认的绘制顺序是 fill、stroke、markers。
当指定一个值时，该值首先被绘制，然后是另外两个值按照它们默认的相对顺序绘制。当指定两个值时，它们将按照指定的顺序绘制，然后是未指定的值。
注意： 对于此属性，标记仅适用于涉及使用 marker-* 属性（例如 marker-start）和 <marker> 元素绘制 SVG 形状的情况。它们不适用于 HTML 文本，因此在这种情况下，您只能确定 stroke 和 fill 的顺序。
值
normal-
按照正常的绘制顺序绘制不同的项目。
stroke、fill、markers-
按照您希望它们被绘制的顺序指定部分或所有这些值。
正式定义
正式语法
paint-order =
normal |
[ fill || stroke || markers ]
示例
反转描边和填充的绘制顺序
SVG
html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
<text x="10" y="75">stroke in front</text>
<text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
CSS
css
text {
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
fill: black;
stroke: red;
stroke-width: 4px;
}
.stroke-behind {
paint-order: stroke fill;
}
结果
使用 HTML 反转描边和填充的绘制顺序
要在 HTML 中控制填充和描边的顺序，您可以使用 -webkit-text-stroke-color 和 -webkit-text-stroke-width CSS 属性。
HTML
html
<div>stroke in front</div>
<div class="stroke-behind">stroke behind</div>
CSS
css
div {
font-family: sans-serif;
font-size: 50px;
font-weight: bold;
fill: black;
padding-top: 10px;
padding-bottom: 10px;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 4px;
}
.stroke-behind {
paint-order: stroke fill;
}
结果
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |
浏览器兼容性
加载中…