Наручивање боја - ЦСС-трикови

Anonim

paint-orderСвојство ЦСС поставља редослед цртања СВГ облика и текста, укључујући испуну, потез и све маркере који би могли бити у употреби. Ти атрибути се подразумевано цртају управо тим редоследом: попуњавање, цртање и маркери. Ово својство нам омогућава да га пребацимо, тако да имамо већу контролу над резултујућим изгледом.

Тамо где ово својство заиста блиста је СВГ текст, посебно елемент који има и испуну и потез. Овако:

Уф, тај удар је грозан. Ширина је само 6 пиксела, али на неки начин покрива испуну. То је зато што је испуна прво обојена, подразумевано, а потом и потез. Али ако то обрнемо користећи paint-orderсвојство, испуна се последње обоји и покрије неугледне делове потеза.

О, боже, то је тако боље! Заправо можемо читати текст и потез је истинитији према облику ликова него раније.

Синтакса

paint-order: normal | ( fill || stroke || markers )
  • Почетна вредност: normal
  • Односи се на: облике и елементе садржаја текста
  • Наследио: да
  • Тип анимације: дискретна

Вредности

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

Вреди напоменути да је потпуно легитимно пренијети једну вриједност. На пример, ако смо урадили ово:

paint-order: stroke;

... тада strokeће прво бити насликана, а затим остале вредности у њиховом подразумеваном редоследу. Узимајући то у обзир, овај пример је једнак следећем:

То практично значи да је имовина или прихвати вредности normalили комбинацију fill, strokeа markersу циљу треба да се фарба.

paint-order: stroke fill markers

А шта ће се догодити ако није наведена вредност или је она неваљана? Користиће се подразумевани редослед: попуњавање, цртање, маркери.

Подршка прегледача

ИЕ Ивица Фирефок Хром Сафари Опера
Не 17+ 60+ 35+ 8+ 22+
Андроид Цхроме Андроид Фирефок Андроид претраживач иОС Сафари опера мини
85+ 79+ 81+ 8+ Све
Извор: каниус

Додатна литература

  • Скалабилна векторска графика (СВГ) Спецификација нивоа 2 (препорука кандидата)