Các text-decorationbất động sản cho biết thêm một gạch dưới, overline, line-qua, hoặc một sự kết hợp của dòng để văn bản đã chọn.
h3 ( text-decoration: underline; )Giá trị
none: không có đường kẻ nào được vẽ và mọi trang trí hiện có đều bị xóa.underline: vẽ một đường 1px ngang qua văn bản tại đường cơ sở của nó.line-through: vẽ một đường 1px ngang qua văn bản tại điểm "giữa" của nó.overline: vẽ một đường thẳng 1px trên văn bản, ngay trên điểm "trên cùng" của nó.inherit: kế thừa cách trang trí của cha mẹ.
Các blinkgiá trị trong spec W3C, nhưng nó bị phản đối và sẽ không làm việc trong bất kỳ trình duyệt hiện tại. Khi nó hoạt động, nó làm cho văn bản có vẻ "nhấp nháy" bằng cách nhanh chóng chuyển đổi nó từ 0% đến 100% độ mờ.
Bản giới thiệu
Xem Pen CSS-Tricks: Text Decoration by CSS-Tricks (@ css-trick) trên CodePen.
Ghi chú sử dụng
Bạn có thể kết hợp underline, overlinehoặc line-throughgiá trị trong một danh sách không gian tách ra để thêm nhiều dòng trang trí:
p ( text-decoration: overline underline line-through; )Theo mặc định, dòng hoặc các dòng kế thừa màu của văn bản như được đặt bởi thuộc tính của nó color. Bạn có thể thay đổi điều này trong các trình duyệt hỗ trợ thuộc text-decoration-colortính hoặc thuộc tính viết tắt ba giá trị.
text-decoration như một thuộc tính tốc ký
text-decorationcó thể được sử dụng kết hợp với text-decoration-stylevà text-decoration-colornhư một thuộc tính viết tắt:
.fancy-underline ( text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; /* can be shortened to */ text-decoration: underline wavy red; )Hiện tại chỉ có Firefox hỗ trợ tính năng này. Safari hỗ trợ nó với -webkittiền tố. Chrome cũng cần -webkittiền tố và các tính năng nền tảng web thử nghiệm được bật trong cờ Chrome.
Có liên quan
text-decoration-colortext-decoration-linetext-decoration-styletext-decoration-skip
Thêm thông tin
- trang trí văn bản như một thuộc tính viết tắt trong Mô-đun trang trí văn bản CSS W3C spec cấp 3 CR
- trang trí văn bản tại MDN
Hỗ trợ trình duyệt
Tất cả các trình duyệt đều hỗ trợ thuộc tính CSS2.1 "longhand" text-decoration. Thuộc tính tốc ký và các thuộc tính con text-decoration-color, text-decoration-linevà text-decoration-styleđược hỗ trợ không tiền tố trong Firefox, và với -webkittiền tố trong Safari. Chrome cũng sẽ nhận ra các giá trị đó khi bật -webkittiền tố và cờ Nền tảng web thử nghiệm.
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 91 | 87 | Không | 88 | TP. |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 14.0-14.4 * |
* text-decorationđược hỗ trợ đầy đủ, các thuộc tính phụ được hỗ trợ với -webkittiền tố.
† các thuộc tính phụ cũng yêu cầu bật cờ các tính năng nền tảng web thử nghiệm.
‡ text-decorationChỉ CSS2.1 ; thuộc tính phụ không được hỗ trợ.
