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 文本,所以,这样的话,你只能决定 strokefill 的顺序。

属性值

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
# PaintOrderProperty
初始值normal
适用元素文本元素
是否是继承属性
计算值as specified
动画类型离散值

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
paint-order

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.