Bóng đổ cho phần tử với box-shadow

Thuộc tính box-shadow ứng dụng để đổ bóng phần tử, trình duyệt tạo bóng bằng cách:

  • Chiều dài của phần tử được tịnh tiến một giá trị
  • Chiều cao của phần tử được tịnh tiến một giá trị
  • Thiết lập màu cho đoạn tịnh tiến

Ví dụ:

    box-shadow: 10px 10px #888888;

Tạo box bóng, dịch trái 10px dịch xuống 10px và tô bóng bằng màu #888888

<style>
    div.exam1 {
        width: 300px;
        height: 100px;
        background-color: #9ACD32;
        box-shadow: 10px 10px #888888;
    }
</style>

<div class="exam1"></div>

Bóng mờ blur

Ngoài thiêt lập 2 giá trị dịch theo x, y còn có thể tùy chọn thêm giá giá trị bóng mờ blur và mở rộng spread

box-shadow: 10px 10px 5px 5px #888888;
<style>
    div.exam2 {
        width: 300px;
        height: 100px;
        background-color: #9ACD32;
        box-shadow: 10px 10px 5px 5px #888888;
    }
</style>
<div class="exam2"></div>

Các giá trị âm

Bạn thiết lập các giá trị thuộc tính trong box-shadow các giá trị âm, chiều sẽ ngược lại

box-shadow: -10px -10px 5px -5px #888888;
<style>
    div.exam3 {
        width: 300px;
        height: 100px;
        background-color: #9ACD32;
        box-shadow: -10px -10px 5px -5px #888888;
    }
</style>

<div class="exam3"></div>

Kỹ thuật dùng inset tô bóng đổ bên trong

Bóng đổ bên trong sử dụng thêm giá trị inset

box-shadow: inset 10px 10px 5px #888888;
<style>
    div.exam4 {
        width: 300px;
        height: 100px;
        background-color: #9ACD32;
        box-shadow: inset 10px 10px 5px #888888;
    }
</style>
<div class="exam4"></div>

Bạn có thể tạo ra nhiều lớp tô, kết hợp cả inset và outset, cách nhau bởi dấy phảy: box-shadow: inset 10px 10px 5px #888888,outset 10px 10px 5px #888888;

<style>
    div.exam5 {
        width: 300px;
        height: 100px;
        background-color: #9ACD32;
        box-shadow: inset 10px 10px 5px #888888, 10px 10px 5px #888888;
    }
</style>

<div class="exam5"></div>

Tạo ra nhiều lớp bóng đổ

box-shadow có thể tạo ra nhiều lớp tô bóng, mỗi lớp cách nhau bằng dấu phảy

<style>
    div.exam6 {
        margin: 50px;
        width: 300px;
        height: 100px;
        background-color: #9ACD32;
        box-shadow:
                0 0 10px 4px #FF6347,
                0 0 10px 30px #FFDAB9,
                30px 0 20px 30px #B0E0E6;
    }
</style>

<div class="exam6"></div>