Cách tạo một cái bóng (Box Shadow) cho phần tử trong CSS

Posted on by mtoplistChuyên mục:Top List

Cách tạo một cái bóng cho phần tử HTML

Tạo một “cái bóng” cho phần tử bên dưới.

cách sử dụng thuộc tính box-shadow để tạo một cái bóng cho phần tử html

– Thông thường thì mỗi phần tử HTML luôn có một “cái bóng” nằm ở ngay sau lưng với kích thước bằng kích thước của nó, nếu muốn thấy được cái bóng thì chúng ta cần phải “nhích” cái bóng ra khỏi vị trí ban đầu, và để làm được điều đó thì chúng ta sử dụng thuộc tính box-shadow với cú pháp như sau:

box-shadow: value;

– Trong đó, value có thể được xác định dựa theo một trong bảy loại giá trị:

none

– Không thiết lập cái bóng cho phần tử.

Xem ví dụ

x y

– Tham số x dùng để chỉ định khoảng cách mà cái bóng được nhích ra khỏi vị trí ban đầu (xét theo chiều ngang)

– Tham số y dùng để chỉ định khoảng cách mà cái bóng được nhích ra khỏi vị trí ban đầu (xét theo chiều dọc)

Xem ví dụ

x y color

– Tham số color dùng để chỉ định màu sắc của cái bóng.

Xem ví dụ

x y shadow color

– Tham số shadow dùng để chỉ định mức độ nhòe của cái bóng, giá trị càng lớn thì cái bóng sẽ càng nhòe.

Xem ví dụ

x y shadow size color

– Tham số size dùng để chỉ định việc tăng hay giảm kích thước của cái bóng.

  • Nếu giá trị dương, kích thước cái bóng sẽ tăng lên.
  • Nếu giá trị âm, kích thước cái bóng sẽ giảm xuống.

Xem ví dụ

initial

– Sử dụng giá trị mặc định của nó.

(mặc định thì thuộc tính box-shadow có giá trị là none)

Xem ví dụ

inherit

– Kế thừa giá trị thuộc tính box-shadow từ phần tử cha của nó.

Xem ví dụ

– Lưu ý: Nếu các bạn muốn tạo nhiều “cái bóng” cho cùng một phần tử HTML thì các bạn cần phải thêm một dấu phẩy nằm ngăn cách giữa mỗi hai bộ giá trị.

Ví dụ:

– Phần tử <div> được thiết lập hai cái bóng.

div{
    margin:65px;
    width:300px;
    height:200px;
    background-color:#73ad21;
    box-shadow:20px 20px 10px gray, -30px -30px 10px blue;
}

Xem ví dụ

mtoplist