В text-decoration-thickness
имота в CSS определя дебелината на хода на декорация линия, която се използва за текст на даден елемент. На text-decoration-line
нуждите стойност или да бъде underline
, line-through
или overline
да отразяват дебелина имота.
.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )
Синтаксис
auto | from-font | |
Стойности
auto
: (По подразбиране) Позволява на браузъра да посочи подходяща дебелина за реда за декорация на текст.from-font
: Ако първият наличен шрифт има показатели, указващи предпочитана дебелина, той използва тази дебелина; в противен случай се държи като автоматичната стойност.: Всяка валидна дължина с единица определя дебелината на линиите за декорация на текст като фиксирана дължина. Това замества всяка информация в шрифта и браузъра по подразбиране.
percentage
: Указва дебелината на линиите за декорация на текст като процент от 1em в шрифта на елемента.initial
: Настройката по подразбиране на свойството, което е автоматично.inherit
: Приема стойността на дебелината на декорацията на родителя.unset
: Премахва текущата дебелина от елемента.
Демонстрация
Променете стойността на text-decoration-thickness
в следващата демонстрация, за да видите как свойството влияе върху текстовата декорация на елемента:
Тя е постоянна за потомците
След като зададете декорация за елемент, всички негови деца също ще имат тази декорация. Сега си представете, че искаме да променим дебелината на декорацията за едно от децата:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; )
p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )
Това не работи, тъй като дебелината на декорацията, посочена от предшествените елементи, не може да бъде заменена. За да работи това, трябва да се зададе специфичност на декорацията за самия елемент:
p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )
Процент и каскада
За това свойство дължината ще се наследи като фиксирана стойност и няма да се мащабира с шрифта. От друга страна, процентът ще наследи като относителна стойност и следователно ще се мащабира с промени в шрифта, както го наследява.
p ( text-decoration-thickness: 20%; )
p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )
Следващата демонстрация показва сравнението между използването на em и процентните стойности в случай на наследяване и, както можете да видите, от лявата страна (в която използваме em) наследената стойност е с фиксирана дължина. Това означава, че не се мащабира с промяната в шрифта. От дясната страна обаче текстът наследява относителна стойност (в този случай 20%); следователно дебелината се мащабира с промяната в шрифта.
Докато текущият работен проект на спецификацията се позовава на процентни стойности за text-decoration-thickness
, действителната поддръжка в момента е ограничена до Firefox.
Използване с text-decoration
Настоящият работен проект на спецификацията на модул за декориране на текст CSS Level 4 включва text-decoration-thickness
като стойност в text-decoration
стенографското свойство.
.link ( text-decoration: underline solid green 1px; )
/* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )
Въпреки че text-decoration
се поддържа добре, в момента поддръжката за включването на text-decoration-thickness
е ограничена до Firefox.
Поддръжка на браузър
Особеност | IE | Ръб, край | Firefox | Chrome | Сафари | Опера |
---|---|---|---|---|---|---|
Имот | Не | Не | 70 | Не | 12.1 | Не |
Проценти | Не | Не | 76 | Не | Не | Не |
Стенография | Не | Не | 70 | Не | Не | Не |
Особеност | Android Chrome | Android Firefox | Браузър за Android | iOS Safari | опера мини |
---|---|---|---|---|---|
Имот | Не | Не | Не | 12.2 | Не |
Проценти | Не | Не | Не | Не | Не |
Стенография | Не | Не | Не | Не | Не |
Бележки
- Преди се извикваше свойството
text-decoration-width
, но беше актуализирано в работния проект за 2019 г. на спецификацията CSS Text Decoration Module Level 4. - Браузърът трябва да използва минимална дебелина от 1 пиксел на устройството.