Thuộc tính text-decoration-style

Thuộc tính text-decoration-style thay đổi kiểu đường kẻ của văn bản: đường đơn, đường đôi, dạng chấm, dạng gạch ngang, đường lượn sóng.

Thuộc tính nên được sử dụng cùng với các thuộc tính text-decoration-line và text-decoration-color. Các thuộc tính này mở rộng tác dụng của thuộc tính text-decoration, là các phiên bản tương đương nâng cao hơn.

Cú pháp

bộ chọn {
	text-decoration-line: solid | double | dotted | dashed | wavy;
}

Giá trị

Giá trị	Mô tả
`solid`	Đường liền nét.
`double`	Đường đôi.
`dotted`	Đường dạng chấm.
`dashed`	Đường dạng gạch ngang.
`wavy`	Đường lượn sóng.

Giá trị mặc định: solid.

Ví dụ . Giá trị wavy

Bây giờ văn bản sẽ được gạch chân bằng đường lượn sóng màu đỏ:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-decoration-style: wavy;
	text-decoration-color: red;
	text-decoration-line: underline;
}

Ví dụ . Giá trị dotted

Bây giờ văn bản sẽ được gạch chân bằng đường dạng chấm màu đỏ:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-decoration-style: dotted;
	text-decoration-color: red;
	text-decoration-line: underline;
}

Ví dụ . Giá trị double

Bây giờ văn bản sẽ bị gạch ngang bằng đường đôi màu đỏ:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-decoration-style: double;
	text-decoration-color: red;
	text-decoration-line: line-through;
}