Box-shadow là một thuộc tính trong CSS cho phép bạn thêm hiệu ứng bóng đổ xung quanh phần tử HTML, tạo chiều sâu và sự tương phản cho các phần tử trên trang web. Thuộc tính này rất hữu ích trong việc tạo ra các hiệu ứng thị giác nâng cao, chẳng hạn như hiệu ứng bóng đổ đơn giản, bóng đổ bên trong hay các bóng đổ phức tạp với nhiều màu sắc và độ mờ. Box-shadow có thể giúp làm nổi bật các phần tử như nút, thẻ (card), hoặc ảnh, mang lại cảm giác tương tác và trực quan hơn cho người dùng.

Cách Điều Chỉnh Box-shadow CSS

Chỉ định Bóng Ngang và Bóng Dọc (h-offset, v-offset):

Đây là cấu hình cơ bản của box-shadow, nơi bạn xác định độ lệch của bóng theo chiều ngang (h-offset) và chiều dọc (v-offset). Các giá trị này có thể là số dương (bóng nằm ở bên phải hoặc phía dưới phần tử) hoặc số âm (bóng nằm ở bên trái hoặc phía trên phần tử).

Ví dụ:

box-shadow: 10px 10px;

Trong ví dụ này, bóng sẽ lệch 10px về phía phải và 10px xuống dưới.

Chỉ Định Màu Cho Box-shadow:

Màu sắc của bóng có thể được tùy chỉnh theo nhu cầu của bạn. Bạn có thể sử dụng các giá trị màu sắc như tên màu (ví dụ red, blue), mã hex (ví dụ #ff0000), màu rgba (ví dụ rgba(0, 0, 0, 0.5)), hoặc màu hsl.

Ví dụ:

box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);

Trong ví dụ này, bóng có màu đen với độ mờ 30% và có bán kính mờ 15px.

Thêm Hiệu Ứng Mờ (Blur) Cho Box-shadow:

Bạn có thể thêm hiệu ứng mờ cho bóng đổ bằng cách chỉ định bán kính mờ (blur radius). Bán kính mờ càng lớn, bóng đổ sẽ càng mềm và lan rộng hơn. Điều này giúp tạo hiệu ứng chiều sâu mượt mà và tự nhiên hơn.

Ví dụ:

box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.4);

Đặt Bán Kính Trải Rộng (Spread Radius):

Tham số này xác định mức độ trải rộng của bóng đổ. Nếu giá trị là dương, bóng sẽ mở rộng ra ngoài, trong khi giá trị âm sẽ làm cho bóng thu hẹp lại và gần hơn với phần tử.

Ví dụ:

box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);

Trong ví dụ này, bán kính trải rộng là 5px, làm cho bóng đổ trải rộng hơn.

Đặt Tham Số Chèn (Inset):

Tham số inset cho phép bạn tạo bóng đổ bên trong phần tử thay vì bên ngoài. Điều này giúp tạo hiệu ứng "đấm lún" cho phần tử, rất thích hợp để tạo các hiệu ứng như thẻ (card) với bóng đổ nội bộ.

Ví dụ:

box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);

Thêm Nhiều Box-shadow CSS:

Bạn có thể thêm nhiều bóng đổ cho cùng một phần tử bằng cách phân cách chúng bằng dấu phẩy (,). Việc này có thể tạo ra các hiệu ứng phức tạp với nhiều lớp bóng đổ khác nhau.

Ví dụ:

box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), -2px -2px 5px rgba(0, 0, 0, 0.1);

Trong ví dụ này, có hai bóng đổ được thêm vào phần tử: một bóng sáng ở phía trên bên trái và một bóng tối ở phía dưới bên phải.

Tạo Box-shadow CSS Cho Thẻ (Card):

Box-shadow là một kỹ thuật tuyệt vời để tạo hiệu ứng cho thẻ (card), mang lại cảm giác 3D cho các phần tử trên trang web. Bạn có thể kết hợp box-shadow với các thuộc tính khác như border-radius để làm cho thẻ trở nên mượt mà hơn.

Ví dụ:

.card {

width: 300px;

height: 200px;

background-color: #fff;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

Trong ví dụ này, thẻ (card) sẽ có hiệu ứng bóng đổ nhẹ dưới đáy, tạo ra cảm giác phần tử nổi lên trên nền trang.

Tổng kết

Sử dụng box-shadow trong CSS không chỉ giúp phần tử của bạn nổi bật mà còn mang lại một giao diện trực quan, hấp dẫn và dễ dàng tương tác. Bằng cách điều chỉnh các tham số như độ lệch ngang, độ mờ, bán kính trải rộng và các bóng đổ bên trong, bạn có thể tạo ra vô số hiệu ứng khác nhau.