OBin's Blog

box-shadow là một thuộc tính css3 khá hay dùng để tạo bóng đổ cho một đối tượng bất kì mà trước kia chúng ta làm web phải dùng đến hiệu ứng của Photoshop sau đó cắt hình để làm. Sau đây là hướng dẫn sử dụng thuộc tính box-shadow trong css3, bài hướng dẫn chi tiết giúp bạn dễ dàng nắm bắt được cách dùng.

Đầu tiên là cách dùng như sau:

div
{
      box-shadow: 10px 10px 5px 5px  #999 inset;
}

Tương ứng với các giá trị phía dưới:

Selector
{
       box-shadow: h-shadow v-shadow blur spread color inset;
}

• Selector: Là đối trượng được chọn ví dụ như div, ul, li, a, class, id...
• shadow : Đổ bóng theo chiều ngang (đơn vị px).
• v-shadow: Đổ bóng theo chiều dọc (đơn vị px).
• blur : Độ mờ bóng đổ (đơn vị px).
• spread : Độ rộng của bóng đổ
• color : Màu bóng đổ
• inset: Đặt hiệu ứng bên trong đối tượng, nếu không dùng thuộc tính này thì mặc định bóng đổ sẻ ở bên ngoài đối tượng.

Ví dụ 1:

div
{
      box-shadow: 0px 0px 6px 6px #000;
}

Ví dụ 2:

div
{
     box-shadow: -5px -5px 5px 5px blue;
}

Ví dụ 3:

div
{
     box-shadow: 5px 5px 5px 5px red;
}

Lưu ý: Thuộc tính box-shadow là css3 nên chỉ hỗ trợ trên IE9+, Firefox, Chrome, Opera, and Safari 5.1.1.

Chúc các bạn thành công!