W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> circle { paint-order: stroke fill; } </style> </head> <body> <h1>paint-order: stroke fill</h1> <p>默认情况下，先填充圆圈，再描边。这里顺序被颠倒了，因此结果不同：</p> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="10" fill="yellow" /> </svg> <p><b>提示：</b>尝试颠倒填充和描边的顺序，或者完全移除 paint-order 属性，此时将采用默认顺序。</p> </body> </html>