paint-order

paint-order CSS 属性允许您控制文本内容和形状的填充、描边（以及绘制标记）的绘制顺序。

语法

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: 按您希望它们绘制的顺序指定这些值中的部分或全部。

正式定义

初始值	`normal`
应用于	文本元素
继承	是
计算值	如指定
动画类型	离散

正式语法

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;
}

结果

规范

规范
可缩放矢量图形 (SVG) 2 # PaintOrder

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

CSS Tricks：paint-order