Maling-bestilling - CSS-triks | CSS-almanakk 2025

CSS- paint-orderegenskapen angir rekkefølgen som SVG-figurer og tekst blir tegnet, inkludert fyll, strek og eventuelle markører som kan være i bruk. Som standard er disse attributtene tegnet i akkurat den rekkefølgen: fyll, strek og markører. Denne egenskapen lar oss slå den opp slik at vi har mer kontroll over det resulterende utseendet.

Hvor denne egenskapen virkelig skinner er med SVG-tekst, spesielt et element som har både fyll og strek. Som dette:

Ugh, det hjerneslaget er kjipt. Det er bare 6 px bredt, men det dekker nesten fyllet. Det er fordi fyllingen er malt først, som standard, etterfulgt av streken. Men hvis vi snur det ved å bruke paint-ordereiendommen, blir fyllingen malt sist og dekker de stygge delene av strek.

Åh, det er så mye bedre! Vi kan faktisk lese teksten, og strek er mer sant til figurenes form enn før.

Syntaks

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

Opprinnelig verdi: normal
Gjelder for: figurer og tekstinnholdselementer
Arvet: ja
Animasjonstype: diskret

Verdier

/* 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;

Det er verdt å merke seg at det er helt legitimt å gi en verdi. For eksempel hvis vi gjorde dette:

paint-order: stroke;

... så strokemales først, etterfulgt av de andre verdiene i standard rekkefølge. Med dette i betraktning er dette eksemplet lik følgende:

Dette betyr i utgangspunktet at eiendommen enten aksepterer en verdi av normaleller en kombinasjon av fill, strokeog markersi den rekkefølgen de skal males.