BASIC TO ADVANCE

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ụ

 

Đăng ký nhận tin.

Chúng tôi chỉ gửi tối đa 2 lần trên 1 tháng. Tuyên bố không spam mail!

Vũ Thanh Tài

About author
The best way to learn is to share
Xem tất cả bài đăng

0 Comments

Bài viết chưa có ai bình luận, hãy là người đầu tiên đi bạn!

Bình luận

Captcha