⌘K

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

cssbộ 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 đỏ: 

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#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 đỏ: 

html<div id="elem">
  Lorem ipsum dolor sit amet.
</div>
css#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 đỏ: 

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;
}

Результат:

BackThuộc tính text-decoration-lineNextThuộc tính text-decoration-color