这篇翻译不完整。请帮忙从英语翻译这篇文章

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

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
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome No support NoEdge No support NoFirefox Full support 60IE No support NoOpera No support NoSafari Full support YesWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 60Opera Android No support NoSafari iOS Full support YesSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

文档标签和贡献者

此页面的贡献者: guoguangkun
最后编辑者: guoguangkun,