Urutan cat - Trik CSS | CSS Almanac 2025

Properti CSS paint-ordermenetapkan susunan bentuk dan teks SVG yang dilukis, termasuk isian, coretan, dan penanda yang mungkin sedang digunakan. Secara lalai, atribut tersebut dilukis mengikut urutan: isi, pukulan, dan penanda. Properti ini membolehkan kita menukarnya sehingga kita mempunyai lebih banyak kawalan terhadap penampilan yang dihasilkan.

Di mana sifat ini benar-benar bersinar adalah dengan teks SVG, terutamanya elemen yang mempunyai isi dan coretan. Seperti ini:

Ugh, strok itu sangat teruk. Lebarnya hanya 6 piksel, tetapi ia hampir keseluruhan. Ini kerana isian dicat terlebih dahulu, secara lalai, diikuti dengan pukulan. Tetapi jika kita membalikkan bahawa menggunakan paint-orderharta tanah, isian dicat terakhir dan meliputi bahagian strok yang tidak sedap dipandang.

Ya ampun, itu jauh lebih baik! Kita sebenarnya dapat membaca teks dan coretan lebih tepat dengan bentuk watak daripada sebelumnya.

Sintaks

paint-order: normal | ( fill || stroke || markers )

Nilai awal: normal
Berlaku untuk: bentuk dan elemen kandungan teks
Diwarisi: ya
Jenis animasi: diskret

Nilai

/* Normal */ paint-order: normal; /* Single values */ paint-order: stroke; /* same as: stroke fill markers */ paint-order: markers; /* same as: markers fill stroke */ /* Multiple values */ paint-order: stroke fill; /* same as: stroke fill markers */ paint-order: markers stroke fill;

Perlu diingat bahawa benar-benar sah untuk melepasi satu nilai. Contohnya, jika kita melakukan ini:

paint-order: stroke;

... maka strokekehendak dicat terlebih dahulu, diikuti oleh nilai-nilai lain dalam urutan lalai mereka. Mengingatnya, contoh ini sama dengan yang berikut:

Ini pada dasarnya bermaksud bahawa harta itu sama ada menerima nilai normalatau gabungan fill, strokedan markersmengikut urutan mereka harus dicat.