Krāsu pasūtīšana - CSS-triki

Anonim

CSS paint-orderrekvizīts nosaka SVG formu un teksta zīmēšanas secību, ieskaitot aizpildījumu, insultu un visus marķierus, kas varētu būt izmantoti. Pēc noklusējuma šie atribūti tiek uzzīmēti tieši tādā secībā: aizpildīšana, vilkšana un marķieri. Šis īpašums ļauj mums to pārslēgt, lai mēs labāk kontrolētu iegūto izskatu.

Šī īpašība patiešām spīd ar SVG tekstu, it īpaši elementu, kuram ir gan aizpildījums, gan insults. Kā šis:

Uh, šis insults ir gnarly. Tas ir tikai 6px plats, bet tas sorta pārklāj pildījumu. Tas ir tāpēc, ka pēc noklusējuma vispirms tiek nokrāsota aizpildīšana, kam seko insults. Bet, ja mēs mainām to, izmantojot paint-orderīpašumu, aizpildījums tiek nokrāsots pēdējais un aptver neizskatīgās insulta daļas.

Ak Dievs, tas ir tik daudz labāk! Mēs faktiski varam lasīt tekstu, un zīmējums ir patiesāks par rakstzīmju formu nekā iepriekš.

Sintakse

paint-order: normal | ( fill || stroke || markers )
  • Sākotnējā vērtība: normal
  • Attiecas uz: formām un teksta satura elementiem
  • Mantots: jā
  • Animācijas veids: diskrēts

Vērtības

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

Ir vērts atzīmēt, ka ir pilnīgi likumīgi nodot vienu vērtību. Piemēram, ja mēs to izdarījām:

paint-order: stroke;

... tad strokevispirms tiks nokrāsota vērtība, kurai sekos pārējās vērtības noklusējuma secībā. Ņemot to vērā, šis piemērs ir vienāds ar šādu:

Tas būtībā nozīmē, ka īpašums vai nu pieņem vērtību, normalvai to kombināciju fill, strokeun markerstādā secībā, kādā tie ir jākrāso.

paint-order: stroke fill markers

Un kas notiek, ja nav norādīta vērtība vai nederīga vērtība? Tiks izmantota noklusējuma secība: aizpildīšana, gājiens, marķieri.

Pārlūkprogrammas atbalsts

IE Mala Firefox Chrome Safari Opera
Nē 17+ 60+ 35+ 8+ 22+
Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mini
85+ 79+ 81+ 8+ Viss
Avots: caniuse

Turpmāka lasīšana

  • Mērogojama vektorgrafikas (SVG) 2. līmeņa specifikācija (kandidāta ieteikums)