Cú Pháp

-Thuộc tính này có tác dụng thiết lập bóng cho thành phần.

Cú Pháp:

box-shadow: none|h-shadow v-shadow blur spread color |inset;

Trong đó:

• none là không xác định bóng cho thành phần. Đây là giá trị mặc định.
• h-shadow v-shadow blur spread color sẽ có giá trị và chức năng tương ứng như sau:
  • h-shadow - thiết lập vị trí đổ bóng theo chiều ngang, có chấp nhận số âm và đây là thuộc tính bắt buộc.
  • v-shadow - thiết lập vị trí đổ bóng theo chiều dọc, có chấp nhận số âm và đây là thuộc tính bắt buộc.
  • blur - thiết lập độ nhòe của bóng. Nếu k khai báo thì blur sẽ là 0 (không nhòe).
  • spread - thiết lập kích thước của bóng (chấp nhận giá trị âm).
  • color - thiết lập màu sắc của bóng tối.
• inset - thiết lập bóng được đổ vào trong (inset) nếu k thiết lập bóng sẽ đổ ra ngoài.

Ví Dụ

VD: Thiết lập bóng cho thẻ p.

p{
    padding: 10px;
    background-color: orange;
    box-shadow: 10px 10px 5px 5px #000;
}

Xem Kết Quả

VD2: Xem chi tiết từng giá trị trong ví dụ.

Xem Ví Dụ