CSS Box Shadow

Thuộc tính box-shadow CSS

CSS box-shadow Thuộc tính áp dụng bóng cho phần tử.

Cách sử dụng đơn giản nhất là chỉ cần chỉ định bóng ngang và bóng dọc:

Các phần tử <div> màu vàng có box-shadow màu đen

Mô hình

div {
  box-shadow: 10px 10px;
}

thử trực tiếp

Tiếp theo, thêm màu sắc cho bóng:

Các phần tử <div> màu vàng có box-shadow màu xám

Mô hình

div {
  box-shadow: 10px 10px grey;
}

thử trực tiếp

Tiếp theo, thêm hiệu ứng mờ cho bóng:

Các phần tử <div> màu vàng, có box-shadow mờ

Mô hình

div {
  box-shadow: 10px 10px 5px grey;
}

thử trực tiếp

thẻ

Bạn có thể sử dụng box-shadow Tạo hiệu ứng thẻ giấy:

1
January 1, 2021
Cà phê
Cà phê

Mô hình

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Thử ngay: Thẻ giấyThử ngay: Thẻ hình ảnh

Thuộc tính bóng CSS

Bảng dưới đây liệt kê các thuộc tính bóng của CSS:

Thuộc tính Mô tả
box-shadow Thêm một hoặc nhiều bóng vào một yếu tố.
text-shadow Thêm một hoặc nhiều bóng vào văn bản.