text-shadow
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thuộc tính CSS text-shadow thêm đổ bóng cho văn bản. Nó chấp nhận một danh sách các đổ bóng được phân cách bằng dấu phẩy để áp dụng cho văn bản và bất kỳ text-decoration nào của nó. Mỗi đổ bóng được mô tả bằng một số kết hợp giữa độ lệch X và Y so với phần tử, bán kính làm mờ và màu sắc.
Try it
text-shadow: 1px 1px 2px pink;
text-shadow: #ffcc00 1px 0 10px;
text-shadow: 5px 5px #558abb;
text-shadow: red 2px 5px;
text-shadow: 5px 10px;
text-shadow:
1px 1px 2px red,
0 0 1em blue,
0 0 0.2em blue;
<section id="default-example">
<p id="example-element">
Far out in the uncharted backwaters of the unfashionable end of the western
spiral arm of the Galaxy...
</p>
</section>
p {
font:
1.5em "Georgia",
serif;
}
Cú pháp
/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
/* color | offset-x | offset-y | blur-radius */
text-shadow: #ffcc00 1px 0 10px;
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;
/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: revert;
text-shadow: revert-layer;
text-shadow: unset;
Thuộc tính này được chỉ định là một danh sách các đổ bóng được phân cách bằng dấu phẩy.
Mỗi đổ bóng được chỉ định bằng hai hoặc ba giá trị <length>, theo sau tùy chọn là giá trị <color>. Hai giá trị <length> đầu tiên là các giá trị <offset-x> và <offset-y>. Giá trị <length> thứ ba, tùy chọn, là <blur-radius>. Giá trị <color> là màu của đổ bóng.
Khi có nhiều hơn một đổ bóng, các đổ bóng được áp dụng từ trước ra sau, với đổ bóng được chỉ định đầu tiên ở trên cùng.
Thuộc tính này áp dụng cho cả pseudo-elements ::first-line và ::first-letter.
Giá trị
<color>-
Tùy chọn. Màu của đổ bóng. Nó có thể được chỉ định trước hoặc sau các giá trị offset. Nếu không được chỉ định, giá trị màu sẽ do user agent quyết định, vì vậy khi cần tính nhất quán trên các trình duyệt, bạn nên định nghĩa nó rõ ràng.
<offset-x> <offset-y>-
Bắt buộc. Các giá trị
<length>này chỉ định khoảng cách của đổ bóng so với văn bản.<offset-x>chỉ định khoảng cách ngang; giá trị âm đặt đổ bóng ở bên trái văn bản.<offset-y>chỉ định khoảng cách dọc; giá trị âm đặt đổ bóng ở trên văn bản. Nếu cả hai giá trị đều là0, đổ bóng được đặt ngay phía sau văn bản, mặc dù nó có thể hiển thị một phần do hiệu ứng của<blur-radius>. <blur-radius>-
Tùy chọn. Đây là giá trị
<length>. Giá trị càng cao, độ mờ càng lớn; đổ bóng trở nên rộng hơn và nhạt hơn. Nếu không được chỉ định, mặc định là0.
Định nghĩa chính thức
| Initial value | none |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Computed value | a color plus three absolute lengths |
| Animation type | a shadow list |
Cú pháp chính thức
text-shadow =
none |
<shadow>#
<shadow> =
<color>? &&
[ <length>{2} [ <length [0,∞]> <length>? ]? ] &&
inset?
Ví dụ
Đổ bóng cơ bản
.red-text-shadow {
text-shadow: red 0 -2px;
}
<p class="red-text-shadow">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
Nhiều đổ bóng
.white-text-with-blue-shadow {
text-shadow:
1px 1px 2px black,
0 0 1em blue,
0 0 0.2em blue;
color: white;
font:
1.5em "Georgia",
serif;
}
<p class="white-text-with-blue-shadow">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.
</p>
Thông số kỹ thuật
| Specification |
|---|
| CSS Text Decoration Module Level 3 # text-shadow-property |