Bóng hộp CSS

Thuộc tính bóng hộp CSS

Thuộc tính CSS box-shadow được sử dụng để áp dụng một hoặc nhiều bóng cho một phần tử.

Chỉ định bóng ngang và bóng dọc

Trong cách sử dụng đơn giản nhất, bạn chỉ xác định bóng ngang và bóng dọc. Màu mặc định của bóng là màu văn bản hiện tại.

Chỉ định màu cho bóng

Tham số color xác định màu của bóng.

Thêm hiệu ứng làm mờ cho bóng

Tham số blur xác định bán kính mờ. Con số càng cao thì bóng sẽ càng mờ.

Đặt bán kính trải rộng của bóng

Tham số spread xác định bán kính trải rộng. Giá trị dương làm tăng kích thước của bóng, giá trị âm làm giảm kích thước của bóng.

Đặt tham số chèn

Tham số inset thay đổi bóng từ bóng ngoài (bóng đầu) thành bóng trong.

Thêm nhiều bóng

Một phần tử cũng có thể có nhiều bóng:

thẻ

Bạn cũng có thể sử dụng thuộc tính box-shadow để tạo những tấm thiệp giống như tờ giấy:

1

Ngày 1 tháng 1 năm 2021

Hardanger, Na Uy

<phong cách>
h1 {
  : 2px 2px;
}
</style>

<cơ thể>
  <h1>Đây là tiêu đề</h1>
  <p>Đây là một đoạn văn</p>
  <p>Đây là một đoạn văn</p>
</body>

Thuộc tính bóng CSS

Bảng sau liệt kê các thuộc tính bóng CSS: