Thuộc tính text-decoration-style trong CSS

Định nghĩa và cách sử dụng

Thuộc tính text-decoration-style đặt loại trang trí văn bản (đường thẳng, sóng, chấm, gạch chéo, đôi).

Lưu ý:Xem thêm: Thuộc tính text-decorationNó là thuộc tính tóm tắt của ba thuộc tính này:

  • text-decoration-line
  • text-decoration-style
  • text-decoration-color

Xem thêm:

Hướng dẫn CSS:CSS văn bản

Hướng dẫn tham khảo HTML DOM:textDecorationStyle Thuộc tính

Ví dụ

Đặt các loại樣式 text-decoration khác nhau:

div.a {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
div.b {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}
div.c {
  text-decoration-line: underline;
  text-decoration-style: double;
}
div.d {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}

Thử ngay

Cú pháp CSS

text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
solid Giá trị mặc định. Chuỗi hiển thị dưới dạng một dòng.
double Chuỗi hiển thị dưới dạng đôi
dotted Chuỗi hiển thị dưới dạng chấm
dashed Chuỗi hiển thị dưới dạng gạch chéo
wavy Chuỗi hiển thị dưới dạng sóng
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: solid
Kế thừa: Không
Chế tạo animation: Không hỗ trợ. Xem thêm:Thuộc tính liên quan đến animation.
Phiên bản: CSS3
Cú pháp JavaScript: object.style.textDecorationStyle="wavy"

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Số liệu có tiền tố -moz- chỉ ra phiên bản đầu tiên sử dụng tiền tố.

Chrome IE / Edge Firefox Safari Opera
57.0 79.0 36.0
6.0 -moz-		 12.1 44.0