Thuộc tính boxShadow của Style

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

boxShadow Thiết lập hoặc trả về bóng (drop-shadow) của phần tử khung.

Xem thêm:

Hướng dẫn CSSThuộc tính box-shadow

Mẫu

Thêm box-shadow cho phần tử div:

document.getElementById("myDIV").style.boxShadow = "10px 20px 30px blue";

Thử ngay

Cú pháp

Trả về thuộc tính boxShadow:

object.style.boxShadow

Đặt thuộc tính boxShadow:

object.style.boxShadow = "none|h-shadow v-shadow blur spread color |inset|initial|inherit"

Ghi chú:boxShadow Thuộc tính 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 sắc 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ả
none Giá trị mặc định. Không hiển thị bóng.
h-shadow Bắt buộc. Vị trí bóng theo chiều ngang. Cho phép giá trị âm.
v-shadow Bắt buộc. Vị trí bóng theo chiều dọc. Cho phép giá trị âm.
blur Tùy chọn. Khoảng cách mờ.
spread Tùy chọn. Kích thước của bóng.
color

Tùy chọn. Màu sắc của bóng. Giá trị mặc định là đen.

Xem thêm Giá trị màu sắc CSSđể lấy danh sách đầy đủ các giá trị màu sắc có thể.

Lưu ý:Trong Safari (trên PC),color Tham số là bắt buộc. Nếu không quy định màu sắc, bóng sẽ không hiển thị.

inset Tùy chọn. Thay đổi bóng ngoài (outset) thành bóng trong.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial
inherit Thừa kế thuộc tính này từ phần tử cha. Xem thêm inherit

Chi tiết kỹ thuật

Giá trị mặc định: Không có
Giá trị trả về: Chuỗi, biểu thị Thuộc tính box-shadow
Phiên bản CSS: CSS3

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ 9.0 Hỗ trợ 5.1 Hỗ trợ