Декорација текста - ЦСС-трикови

Anonim

text-decorationПроперти додаје подвучено, оверлине, лине-тхроугх или комбинацију линија до изабраног текста.

h3 ( text-decoration: underline; )

Вредности

  • none: није повучена линија и уклоњена је постојећа декорација.
  • underline: црта линију од 1 пиксела преко текста на основној линији.
  • line-through: црта линију од 1 пиксела по тексту на његовој „средњој“ тачки.
  • overline: црта линију од 1 пиксела по тексту, директно изнад његове „горње“ тачке.
  • inherit: наслеђује украс родитеља.

blinkВредност је у спец В3Ц, али је застарела и неце радити у било ком тренутни бровсер. Када је успео, чинило се да текст „трепће“ тако што га је брзо пребацио између 0% и 100% непрозирности.

Демо

Погледајте ЦСС-трикове оловке: Декорација текста од ЦСС-трикова (@ цсс-трикови) на ЦодеПен-у.

Напомене о употреби

Можете комбиновати underline, overlineили line-throughвредности у листи простор одвојен да додате више декорацији линије:

p ( text-decoration: overline underline line-through; )

Ред или редови подразумевано наслеђују боју текста подешену њеним colorсвојством. То можете да промените у прегледачима који подржавају text-decoration-colorсвојство или скраћеницу са три вредности.

text-decoration као стенографско својство

text-decorationможе се користити у комбинацији са text-decoration-styleи text-decoration-colorкао стенографско својство:

.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )

Тренутно само Фирефок подржава овај непрефикс. Сафари то подржава -webkitпрефиксом. Цхроме-у су такође потребни -webkitпрефикс и експерименталне функције веб платформе омогућене у Цхроме заставама.

Повезан

  • text-decoration-color
  • text-decoration-line
  • text-decoration-style
  • text-decoration-skip

Више информација

  • декорација текста као стенографско својство у модулу за декорацију текста ЦСС нивоа В3Ц, ниво 3 ЦР
  • декорација текста на МДН

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

Сви прегледачи подржавају својство „дугорочно“ ЦСС2.1 text-decoration. Стенографско својство и под-својства text-decoration-color, text-decoration-lineи text-decoration-styleподржани су без префикса у Фирефок-у и са -webkitпрефиксом у Сафари-ју. Цхроме ће такође препознати те вредности са -webkitомогућеним префиксом и експерименталном веб платформом.

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.

Десктоп

Хром Фирефок ИЕ Ивица Сафари
91 87 Не 88 ТП

Мобиле / Таблет

Андроид Цхроме Андроид Фирефок Андроид иОС Сафари
88 85 81 14,0-14,4 *

* text-decorationпотпуно подржано, под-својства подржана -webkitпрефиксом.
† под-својства додатно захтевају омогућену експерименталну функцију веб платформе.
‡ text-decorationсамо ЦСС2.1 ; под-својства нису подржана.