主页
CSS 参考手册
CSS paint-order 属性
trycss_paint-order
运行 ❯
×
更改方向
保存代码
更改主题
<!DOCTYPE html> <html> <head> <style> circle { paint-order: stroke fill; } </style> </head> <body> <h1>paint-order: stroke fill</h1> <p>Default is to paint the circle with fill first, then stroke. Here, the order is reveresed, and so the outcome is different:</p> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="10" fill="yellow" /> </svg> <p><strong>Tip:</strong> Try to reverse the order of fill and stroke, or remove paint-order property entirely and paint-order becomes the default order.</p> </body> </html>