⌘K

A text-decoration-style tulajdonság

A text-decoration-style tulajdonság megváltoztatja a szöveg vonaltípusát: egyszínű vonal, dupla, pontok formájában, szaggatott vonal, hullámos vonal.

A tulajdonságot együtt kell használni a text-decoration-line és a text-decoration-color tulajdonságokkal. Ezek a tulajdonságok kiterjesztik a text-decoration tulajdonság hatását, annak fejlettebb párjaiként szolgálva.

Szintaxis

cssselector {
  text-decoration-line: solid | double | dotted | dashed | wavy;
}

Értékek

Érték Leírás
solid Folyamatos vonal.
double Dupla vonal.
dotted Pontokból álló vonal.
dashed Szaggatott vonal.
wavy Hullámos vonal.

Alapértelmezett érték: solid.

Példa . A wavy érték

Most a szöveg aláhúzva lesz piros hullámos vonallal: 

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Példa . A dotted érték

Most a szöveg aláhúzva lesz piros pontokból álló vonallal: 

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-decoration-style: dotted;
  text-decoration-color: red;
  text-decoration-line: underline;
}

Результат:

Példa . A double érték

Most a szöveg áthúzva lesz piros dupla vonallal: 

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#elem {
  text-decoration-style: double;
  text-decoration-color: red;
  text-decoration-line: line-through;
}

Результат:

BackA text-decoration-line tulajdonságNextA text-decoration-color tulajdonság