Thuộc tính bóng hộp CSS
Ví dụ
Thêm bóng cho các phần tử <div> khác nhau:
#example1 {
box-shadow: 5px 10px;
}
#example2 {
box-shadow:
5px 10px #888888;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính box-shadow
gắn một hoặc nhiều bóng vào một phần tử.
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | Đúng. Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | object .style.boxShadow="10px 20px 30px màu xanh" Hãy dùng thử |
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.
Các số theo sau là -webkit- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
Cú pháp CSS
box-shadow: none| h-offset v-offset blur spread color |inset|initial|inherit;
Lưu ý: Để đính kèm nhiều bóng vào một phần tử, hãy thêm danh sách bóng được phân tách bằng dấu phẩy (xem ví dụ "Tự thử" bên dưới).
Giá trị tài sản
Value | Description | Demo |
---|---|---|
none | Default value. No shadow is displayed | Demo ❯ |
h-offset | Required. The horizontal offset of the shadow. A positive value puts the shadow on the right side of the box, a negative value puts the shadow on the left side of the box | Demo ❯ |
v-offset | Required. The vertical offset of the shadow. A positive value puts the shadow below the box, a negative value puts the shadow above the box | Demo ❯ |
blur | Optional. The blur radius. The higher the number, the more blurred the shadow will be | Demo ❯ |
spread | Optional. The spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow | Demo ❯ |
color | Optional. The color of the shadow. The default value is the text color. Look at CSS Color Values for a complete list of possible color values. Note: In Safari (on PC) the color parameter is required. If you do not specify the color, the shadow is not displayed at all. |
Demo ❯ |
inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow | Demo ❯ |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Thêm hiệu ứng làm mờ cho bóng:
#example1 {
box-shadow: 10px 10px 8px #888888;
}
Hãy tự mình thử »Ví dụ
Xác định bán kính trải rộng của bóng:
#example1 {
box-shadow: 10px 10px 8px 10px #888888;
}
Hãy tự mình thử »Ví dụ
Xác định nhiều bóng:
#example1 {
box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}
Hãy tự mình thử »Ví dụ
Hình ảnh ném lên bàn. Ví dụ này minh họa cách tạo ảnh "Polaroid" và xoay ảnh:
div.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid
#BFBFBF;
background-color: white;
box-shadow: 10px 10px 5px #aaaaaa;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: CSS Box Shadow
Tham chiếu DOM HTML: thuộc tính boxShadow