Текстова декорация - CSS-трикове

Anonim

В text-decorationимота добавя подчертаване, Номера, линия през, или комбинация от линии до избран текст.

h3 ( text-decoration: underline; )

Стойности

  • none: не се чертае линия и всяка съществуваща декорация се премахва.
  • underline: изчертава 1px линия в текста в основата му.
  • line-through: изчертава 1px линия в текста в неговата „средна“ точка.
  • overline: чертае 1px линия в текста, точно над неговата „горна“ точка.
  • inherit: наследява декорацията на родителя.

На blinkстойност е в спецификациите на W3C, но тя е отхвърлена и няма да работи във всяка текуща браузър. Когато заработи, той накара текста да изглежда „мигащ“, като бързо го превключва между 0% и 100% непрозрачност.

Демонстрация

Вижте Pen CSS-трикове: Декорация на текст от CSS-трикове (@ css-трикове) на CodePen.

Бележки за употреба

Можете да комбинирате 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; )

Понастоящем само Firefox поддържа това без префикс. Safari го поддържа с -webkitпрефикса. Chrome също се нуждае от -webkitпрефикса и експерименталните функции на уеб платформата, активирани във флаговете на Chrome.

Свързани

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

Повече информация

  • текстова декорация като стенографско свойство в спецификацията W3C CSS Модул за декорация на текст Ниво 3 CR
  • текстова декорация в MDN

Поддръжка на браузър

Всички браузъри поддържат свойството „дългосрочно“ на CSS2.1 text-decoration. Стенографското свойство и под-свойствата text-decoration-color, text-decoration-lineи text-decoration-styleсе поддържат без префикс във Firefox и с -webkitпрефикса в Safari. Chrome също ще разпознае тези стойности с -webkitактивиран префикс и флаг за експериментални уеб платформи.

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.

работен плот

Chrome Firefox IE Ръб, край Сафари
91 87 Не 88 TP

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

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

* text-decorationнапълно поддържан, под-свойства, поддържани с -webkitпрефикс.
† под-свойствата допълнително изискват активиран флаг за експериментални функции на уеб платформата.
‡ text-decorationсамо CSS2.1 ; под-свойства не се поддържат.