paint-order

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

语法

css

/*默认 */
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: 指定一部分或者全部这些属性的渲染顺序

形式语法

paint-order = 
  normal                         |
  [ fill || stroke || markers ]

示例

HTML

html

<p>Stroke in front</p>

<p class="stroke-behind">Stroke behind</p>

CSS

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

结果

规范

Specification
Scalable Vector Graphics (SVG) 2 # PaintOrder

初始值	`normal`
适用元素	文本元素
是否是继承属性	是
计算值	as specified
动画类型	离散值

浏览器兼容性

BCD tables only load in the browser