Текст-прикраса - CSS-хитрощі

Anonim

text-decorationВластивість додає підкреслення, довгий ряд, лінія-Through або комбінацію ліній виділеного тексту.

h3 ( text-decoration: underline; )

Цінності

  • none: жодна лінія не проводиться, а будь-яка наявна прикраса видаляється.
  • underline: малює лінію розміром 1 піксель по всьому тексту біля основи.
  • line-through: малює лінію розміром 1 піксель у тексті у його “середній” точці.
  • overline: малює лінію розміром 1 піксель у тексті, безпосередньо над його верхньою точкою.
  • inherit: успадковує оздоблення батьків.

blinkЗначення в W3C специфікації, але вона застаріла і не буде працювати в будь-якому поточному браузері. Коли він спрацював, він змусив текст блимати, швидко перемикаючи його між 0% і 100% непрозорістю.

Демо

Див. CSS-хитрощі Pen: Прикраса тексту за допомогою CSS-Tricks (@ css-tricks) на 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

Більше інформації

  • текстове оформлення як скорочена властивість у модулі текстового оформлення тексту CSS рівня W3C рівня 3 CR
  • оформлення тексту в MDN

Підтримка браузера

Усі браузери підтримують властивість CSS2.1 “longhand” text-decoration. Властивість стенографії і суб-властивість text-decoration-color, text-decoration-lineі text-decoration-styleпідтримуються в Firefox без префікса і з -webkitпрефіксом в Safari. Chrome також розпізнає ці значення з -webkitувімкненим прапорцем та експериментальною веб-платформою.

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
91 87 Ні 88 ТП

Мобільний / планшетний

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

* text-decorationповністю підтримується, субвластивості, що підтримуються -webkitпрефіксом.
† Для додаткових властивостей додатково потрібен експериментальний прапорець функцій платформи.
‡ text-decorationлише CSS2.1 ; підвластивості не підтримуються.