Hướng dẫn box shadow text css - hộp văn bản bóng mờ css
Show text-shadow là gì?Tương tự như 8, 9 cũng là thuộc tính mới trong CSS3, được sử dụng để tạo bóng đổ (shadow) cho text. Cấu trúctag {
text-shadow: h-offset v-offset blur color;
} 9 có tất cả 4 giá trị chính, lần lượt điều khiển shadow dịch chuyển theo chiều ngang ( div { color: #4576FF; font-size: 30px; font-weight: bold; }1), theo chiều dọc ( div { color: #4576FF; font-size: 30px; font-weight: bold; }2), tạo độ mờ ( div { color: #4576FF; font-size: 30px; font-weight: bold; }3), và màu cho shadow.
colorMã màu Tên màu Giá trị rgba
#ff0000; red rgba(183, 183, 183, 0.5); div { color: #4576FF; font-size: 30px; font-weight: bold; } Các giá trị màu có thể có của shadow Cách sử dụng HTML viết: div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
} Các giá trị màu có thể có của shadow Cách sử dụng HTML viết:CSS viết - khi chưa sử dụng div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
} Hiển thị trình duyệt: div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
} Bây giờ ta sẽ sử dụng div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
} CSS viết:
box-shadow là gì?8 là thuộc tính được tạo ra nhằm xử lý bóng đổ (shadow) cho thành phần, nếu như trước đây để tạo được shadow, ta cần dùng div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
} 0, và xử lý transparence phức tạp, thì giờ đây việc này sẽ vô cùng đơn giản.Cấu trúctag {
box-shadow: h-offset v-offset blur spread color optional;
} box-shadow có tất cả 5 giá trị chính, lần lượt điều khiển shadow dịch chuyển theo chiều ngang ( div { color: #4576FF; font-size: 30px; font-weight: bold; }1), theo chiều dọc ( div { color: #4576FF; font-size: 30px; font-weight: bold; }2), tạo độ mờ ( div { color: #4576FF; font-size: 30px; font-weight: bold; }3), tạo shadow phân tán ( div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
} 4) và màu cho shadow, và 1 giá trị tùy chọn, được dùng thay đổi tính chất shadow theo vị trí bên ngoài hay bên trong thành phần (div {
color: #4576FF;
font-size: 30px;
font-weight: bold;
text-shadow: 0px 5px 5px #999999;
} 5).
Mã màu Tên màu Giá trị rgba#ff0000; red rgba(183, 183, 183, 0.5);
Các giá trị màu có thể có của shadow div { border: 3px solid #ffcccc; height: 100px; line-height: 100px; margin: 30px; text-align: center; width: 200px; } optional inset Shadow bên trong thành phần 0 optional inset Hiển thị trình duyệt: điều chỉnh shadow theo chiều ngang: 1 Hiển thị trình duyệt: điều chỉnh shadow theo chiều dọc 2
3 Ví dụ thêm - Một số
|