DANH MỤC: Nền và Viền

Thuộc tính box-shadow trong CSS3


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ụ

 

Nguồn: Toidicode.com

Thông tin tác giả

Vũ Thanh Tài

Vũ Thanh Tài

Biển học vô biên, quay đầu là dại!

Hãy tham gia group facebook để cùng giao lưu chia sẻ kiến thức! Tham Gia