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>

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>

Nguồn tin: Xuanthulab