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:

<html>
<head></head>
<body>
<p>box-shadow</p>
</body>
</html>

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:

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;

box-shadow

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;

box-shadow

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;

box-shadow

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;

box-shadow

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;

box-shadow

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;

box-shadow

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;

box-shadow

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;

box-shadow

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;

box-shadow

box-sizing