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

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS3
• box-shadow

box-shadow là gì?

box-shadow 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 background-image, 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úc

tag {
    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 (h-offset), theo chiều dọc (v-offset), tạo độ mờ (blur), tạo shadow phân tán (spread) 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 (inset).

Cách sử dụng

HTML viết:

Box - shadow

CSS viết - khi chưa sử dụng box-shadow:

div {
    border: 3px solid #ffcccc;
    height: 100px;
    line-height: 100px;
    margin: 30px;
    text-align: center;
    width: 200px;
}

Hiển thị trình duyệt:

Bây giờ ta sẽ sử dụng box-shadow để chỉnh shadow cho box như sau:

CSS viết:

div {
    border: 3px solid #ffcccc;
    box-shadow: 0px 0px 5px 5px #999999;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 200px;
}

Hiển thị trình duyệt:

Với cách viết như trên, ta thấy shadow đã được tạo một cách dễ dàng với 1 dòng lệnh, ta có thể điều chỉnh h-offset và v-offset để xem thay đổi:

Hiển thị trình duyệt: điều chỉnh shadow theo chiều ngang:

div {
    border: 3px solid #ffcccc;
    box-shadow: 10px 0px 5px 5px #999999;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 200px;
}

Hiển thị trình duyệt: điều chỉnh shadow theo chiều dọc

div {
    border: 3px solid #ffcccc;
    box-shadow: 0px 10px 5px 5px #999999;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 200px;
}

box-shadow với inset

div {
    border: 3px solid #ffcccc;
    box-shadow: box-shadow: 0px -1px 5px 3px #999 inset;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 200px;
}

Ví dụ thêm - Một số box-shadow thường dùng

Shadow nhạt

div {
    border: 3px solid #ffcccc;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 200px;
}

Shadow đậm

div {
    border: 3px solid #ffcccc;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6);
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 200px;
}

Shadow bên dưới gần

div {
    border: 3px solid #ffcccc;
    box-shadow: 0 4px 2px -3px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 200px;
}

Shadow bên dưới xa

div {
    border: 3px solid #ffcccc;
    box-shadow: 0px 10px 6px -6px #999999;
    height: 100px;
    line-height: 100px;
    text-align: center;
    width: 200px;
}

Tới đây chắc các bạn đã biết cách dùng box-shadow như thế nào rồi he, các bạn cũng có thể xem nhiều ví dụ hơn tại phần tham khảo box-shadow hoặc xem công cụ tạo box-shadow nhé.

• Trang chủ
• Tham khảo
• CSS
• CSS3
• Ví dụ về thuộc tính box-shadow

Thuộc tính box-shadow với giá trị ngang và dọc

Thuộc tính box-shadow với giá trị ngang và dọc: Định vị trí bóng nằm ngang và dọc cho thành phần (có thể dùng số âm), đây là thuộc tính bắt buộc.

HTML viết:

box-shadow

CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
}

Hiển thị trình duyệt khi chưa có box-shadow:

Thêm thuộc tính box-shadow, CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
    box-shadow: 30px 30px;
    -moz-box-shadow: 30px 30px;
    -webkit-box-shadow: 30px 30px;
    -o-box-shadow: 30px 30px;
    -ms-box-shadow: 30px 30px;
}

Hiển thị trình duyệt khi có box-shadow: 30px 30px;

Thuộc tính box-shadow với giá trị âm, CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
    box-shadow: -10px -10px;
    -moz-box-shadow: -10px -10px;
    -webkit-box-shadow: -10px -10px;
    -o-box-shadow: -10px -10px;
    -ms-box-shadow: -10px -10px;
}

Hiển thị trình duyệt khi có box-shadow: -10px -10px;

Thuộc tính box-shadow với giá trị độ mờ (blur)

Thuộc tính box-shadow với giá trị độ mờ: Định khoảng cách mờ cho bóng.

Thêm thuộc tính box-shadow, CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
    box-shadow: 30px 30px 10px;
    -moz-box-shadow: 30px 30px 10px;
    -webkit-box-shadow: 30px 30px 10px;
    -o-box-shadow: 30px 30px 10px;
    -ms-box-shadow: 30px 30px 10px;
}

Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px;

Tăng thêm giá trị độ mờ cho box-shadow, CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
    box-shadow: 30px 30px 30px;
    -moz-box-shadow: 30px 30px 30px;
    -webkit-box-shadow: 30px 30px 30px;
    -o-box-shadow: 30px 30px 30px;
    -ms-box-shadow: 30px 30px 30px;
}

Hiển thị trình duyệt khi có box-shadow: 30px 30px 30px;

Thuộc tính box-shadow với giá trị độ lan rộng (spread)

Thuộc tính box-shadow với giá trị độ lan rộng: Tăng hoặc giảm độ lan rộng cho bóng.

Thêm thuộc tính box-shadow , CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
    box-shadow: 30px 30px 10px 10px;
    -moz-box-shadow: 30px 30px 10px 10px;
    -webkit-box-shadow: 30px 30px 10px 10px;
    -o-box-shadow: 30px 30px 10px 10px;
    -ms-box-shadow: 30px 30px 10px 10px;
}

Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 10px;

Tăng thêm giá trị độ lan rộng cho box-shadow, CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
    box-shadow: 30px 30px 10px 30px;
    -moz-box-shadow: 30px 30px 10px 30px;
    -webkit-box-shadow: 30px 30px 10px 30px;
    -o-box-shadow: 30px 30px 10px 30px;
    -ms-box-shadow: 30px 30px 10px 30px;
}

Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 30px;

Thuộc tính box-shadow với giá trị màu sắc

Thuộc tính box-shadow với giá trị màu sắc: Định màu sắc cho bóng.

Thêm thuộc tính box-shadow , CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
    box-shadow: 30px 30px 10px 10px #0000cc;
    -moz-box-shadow: 30px 30px 10px 10px #0000cc;
    -webkit-box-shadow: 30px 30px 10px 10px #0000cc;
    -o-box-shadow: 30px 30px 10px 10px #0000cc;
    -ms-box-shadow: 30px 30px 10px 10px #0000cc;
}

Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 10px #0000cc;

Thuộc tính box-shadow với giá trị inset

Thuộc tính box-shadow với giá trị inset: Thay đổi bóng từ ngoài tối vào trong sáng.

Thêm thuộc tính box-shadow , CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
    box-shadow: 30px 30px 10px 10px #0000cc inset;
    -moz-box-shadow: 30px 30px 10px 10px #0000cc inset;
    -webkit-box-shadow: 30px 30px 10px 10px #0000cc inset;
    -o-box-shadow: 30px 30px 10px 10px #0000cc inset;
    -ms-box-shadow: 30px 30px 10px 10px #0000cc inset;
}

Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 10px #0000cc inset;

Xem ví dụ khác của thuộc tính box-shadow, CSS viết:

p {
    background: #cccccc;
    border: 5px solid #cc0000;
    height: 100px;
    width: 150px;
    box-shadow: 5px 5px 10px 10px #0000cc inset;
    -moz-box-shadow: 5px 5px 10px 10px #0000cc inset;
    -webkit-box-shadow: 5px 5px 10px 10px #0000cc inset;
    -o-box-shadow: 5px 5px 10px 10px #0000cc inset;
    -ms-box-shadow: 5px 5px 10px 10px #0000cc inset;
}

Hiển thị trình duyệt khi có box-shadow: 5px 5px 10px 10px #0000cc inset;