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).

Giá trị Đơn vị VD Mô tả
h-offset px
em		 5px Điều chỉnh khoảng cách shadow theo chiều ngang
v-offset px
em		 5px Điều chỉnh khoảng cách shadow theo chiều dọc
blur px
em		 5px Điều chỉnh độ mờ của shadow
spread px
em		 5px Điều chỉnh độ phân tán của shadow
color 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
optional inset inset Shadow bên trong thành phần

Cách sử dụng

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div>Box - shadow</div>
</body>
</html>

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:

Box - shadow

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:

Box - shadow

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;
}
Box - shadow

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

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;
}
Box - shadow

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;
}
Box - shadow

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;
}
Box - shadow

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;
}
Box - shadow

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;
}
Box - shadow

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é.

border-radius

text-shadow