Thuộc tính CSS text-shadow
Thí dụ
Bóng văn bản cơ bản:
h1
{
text-shadow: 2px 2px #ff0000;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc text-shadow
tính thêm bóng vào văn bản.
Thuộc tính này chấp nhận một danh sách các bóng được phân tách bằng dấu phẩy sẽ được áp dụng cho văn bản.
Giá trị mặc định: | không ai |
---|---|
Thừa hưởng: | Đúng |
Hoạt hình: | Đúng. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.textShadow = "2px 5px 5px đỏ" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
Cú pháp CSS
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Lưu ý: Để thêm nhiều bóng vào văn bản, hãy thêm danh sách các bóng được phân tách bằng dấu phẩy.
Giá trị tài sản
Value | Description | Play it |
---|---|---|
h-shadow | Required. The position of the horizontal shadow. Negative values are allowed | |
v-shadow | Required. The position of the vertical shadow. Negative values are allowed | |
blur-radius | Optional. The blur radius. Default value is 0 | |
color | Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values | |
none | Default value. No shadow | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Bóng văn bản với hiệu ứng mờ:
h1 {
text-shadow: 2px 2px 8px #FF0000;
}
Thí dụ
Bóng văn bản trên văn bản trắng:
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
Thí dụ
Bóng chữ với ánh sáng neon đỏ:
h1 {
text-shadow: 0 0 3px #FF0000;
}
Thí dụ
Bóng chữ với ánh sáng neon màu đỏ và xanh lam:
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
Các trang liên quan
Hướng dẫn CSS: CSS Text Shadow
Tham chiếu HTML DOM: thuộc tính textShadow