1. Web
  2. CSS
  3. Reference
  4. Properties
  5. text-decoration-style

text-decoration-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Thuộc tính CSS text-decoration-style xác định kiểu của các đường được chỉ định bởi text-decoration-line. Kiểu áp dụng cho tất cả các đường được đặt bởi text-decoration-line.

Try it

text-decoration-style: solid;

text-decoration-style: double;

text-decoration-style: dotted;

text-decoration-style: dashed;

text-decoration-style: wavy;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

#example-element {
  text-decoration-line: underline;
}

Nếu trang trí được chỉ định có ý nghĩa ngữ nghĩa cụ thể, chẳng hạn như đường gạch ngang có nghĩa là một số văn bản đã bị xóa, các tác giả được khuyến khích biểu thị ý nghĩa này bằng một thẻ HTML, như <del> hay <s>. Vì trình duyệt có thể vô hiệu hóa tạo kiểu trong một số trường hợp, ý nghĩa ngữ nghĩa sẽ không biến mất trong tình huống đó.

Khi cần đặt nhiều thuộc tính trang trí đường văn bản cùng một lúc, có thể tiện hơn khi sử dụng thuộc tính viết tắt text-decoration thay thế.

Cú pháp

css
/* Giá trị từ khóa */
text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;

/* Giá trị toàn cục */
text-decoration-style: inherit;
text-decoration-style: initial;
text-decoration-style: revert;
text-decoration-style: revert-layer;
text-decoration-style: unset;

Giá trị

solid

Vẽ một đường đơn.

double

Vẽ một đường đôi.

dotted

Vẽ một đường chấm.

dashed

Vẽ một đường đứt nét.

wavy

Vẽ một đường gợn sóng.

-moz-none

Không vẽ đường nào. Thay vào đó hãy dùng text-decoration-line: none.

Định nghĩa hình thức

Initial valuesolid
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Computed valueas specified
Animation typediscrete

Cú pháp hình thức

text-decoration-style = 
  solid   |
  double  |
  dotted  |
  dashed  |
  wavy

Ví dụ

Đặt đường gạch chân gợn sóng

Ví dụ sau tạo ra một đường gạch chân gợn sóng màu đỏ:

CSS

css
.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

HTML

html
<p class="wavy">This text has a wavy red line beneath it.</p>

Kết quả

Đặc tả kỹ thuật

Thông số kỹ thuật
CSS Text Decoration Module Level 3
# text-decoration-style-property

Tương thích trình duyệt

Xem thêm

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này