paint-order
Baseline
2024
Newly available
Since â¨March 2024â©, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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-
æå®ä¸é¨åæè å ¨é¨è¿äºå±æ§ç渲æ顺åº
å½¢å¼è¯æ³
paint-order =
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 |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |
| åå§å¼ | normal |
|---|---|
| éç¨å ç´ | ææ¬å ç´ |
| æ¯å¦æ¯ç»§æ¿å±æ§ | æ¯ |
| 计ç®å¼ | as specified |
| å¨ç»ç±»å | 离æ£å¼ |