Tô bóng box với thuộc tính box-shadow CSS3

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

Thuộc tính box-shadow ứng dụng để đổ bóng box 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

Cú pháp cơ bản như sau:

box-shadow: none;   /* không tô bóng box */

box-shadow: offset-x offset-y blur-radius? spread-radius? color?;

box-shadow: inset offset-x offset-y blur-radius? spread-radius? color?;

Trong đó tham số có dấu ? là tùy chọn, có thể không thiết lập. Ý nghĩa của các tham số:

• offset-x: khoảng dịch đổ bóng chiều x
• offset-y: khoảng dịch đổ bóng chiều y
• blur-radius: bán kính mờ
• spread-radius: bán kính mở rộng
• color: màu đổ bóng
• inset: bóng sẽ tô trong box

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>