Thuộc tính box-shadow CSS

Định nghĩa và cách sử dụng

Thuộc tính boxShadow thêm một hoặc nhiều bóng vào khung.

Lưu ý:Hãy sử dụng thuộc tính border-image-* để tạo nút có thể mở rộng đẹp mắt!

Xem thêm:

Hướng dẫn CSS3:BORDER CSS3

Hướng dẫn tham khảo HTML DOM:Thuộc tính boxShadow

Ví dụ

Thêm box-shadow vào phần tử div:

div
{
box-shadow: 10px 10px 5px #888888;
}

Thử ngay

Có nhiều ví dụ khác ở cuối trang.

Cú pháp CSS

box-shadow: h-shadow v-shadow blur spread color inset;

Chú ý:box-shadow thêm một hoặc nhiều bóng vào khung. Thuộc tính này là danh sách bóng được phân tách bằng dấu phẩy, mỗi bóng được quy định bởi 2-4 giá trị độ dài, giá trị màu tùy chọn và từ khóa tùy chọn inset. Giá trị độ dài bị bỏ qua là 0.

Giá trị thuộc tính

Giá trị Mô tả Kiểm tra
h-shadow Bắt buộc. Vị trí bóng theo chiều ngang. Cho phép giá trị âm. Kiểm tra
v-shadow Bắt buộc. Vị trí bóng theo chiều dọc. Cho phép giá trị âm. Kiểm tra
blur Tùy chọn. Khoảng cách mờ. Kiểm tra
spread Tùy chọn. Kích thước của bóng. Kiểm tra
color Tùy chọn. Màu sắc của bóng. Xem giá trị màu CSS. Kiểm tra
inset Tùy chọn. Thay đổi bóng ngoài (outset) thành bóng trong. Kiểm tra

Chi tiết kỹ thuật

Giá trị mặc định: none
Kế thừa: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.boxShadow="10px 10px 5px #888888"

Các ví dụ khác

Hình ảnh được văng lên bàn
Ví dụ này minh họa cách tạo ảnh Polaroid và xoay ảnh.

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Số liệu với tiền tố -webkit- hoặc -moz- đại diện cho phiên bản đầu tiên sử dụng tiền tố.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5