Hướng dẫn box-shadow trong css - box-shadow trong css

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

box-shadow là gì?

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

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

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 [

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

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

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

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

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

Mã màu Tên màu Giá trị rgba

#ff0000; red rgba[183, 183, 183, 0.5];

Box - shadow

Các giá trị màu có thể có của shadow

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

optional

inset

Shadow bên trong thành phần

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

optional

inset

Shadow bên trong thành phần

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

Cách sử dụng

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

HTML viết:

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

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

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

2:

Hiển thị trình duyệ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;
}

Bây giờ ta sẽ sử dụng

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

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

CSS viết:

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

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

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

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

Box - shadow

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

• 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.
• Hiển thị trình duyệt khi có box-shadow: 30px 30px 10px 10px #0000cc;
• CSS3
• 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.

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:

Box - shadow

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

Box - shadow

Trang chủ

Tham khảo

Box - shadow

CSS

Ví dụ về thuộc tính box-shadow

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:

Tham khảo

CSS

Ví dụ về thuộc tính box-shadow

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

Box - shadow

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:

Box - shadow

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:

Box - shadow

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:

Box - shadow

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:

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

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

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

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:

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

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