paint-order

Experimental

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

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

正式语法

normal | [ fill || stroke || markers ]

使用示例

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

效果

说明

Specification Status Comment
Scalable Vector Graphics (SVG) 2
paint-order
Candidate Recommendation Initial definition

初始值normal
适用元素text elements
是否是继承属性yes
计算值as specified
Animation typediscrete

浏览器兼容性

BCD tables only load in the browser