Đổ bóng hộp

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 42 trên 76.

Trong CSS, thuộc tính box-shadow dùng để thêm hiệu ứng đổ bóng cho hộp của một phần tử. Thuộc tính này giúp bạn tạo hiệu ứng bắt mắt, khiến các phần tử trông như “nổi bật” khỏi trang hoặc tạo cảm giác có chiều sâu và kích thước.

Đây là cú pháp cơ bản để sử dụng thuộc tính box-shadow:

selector {
    box-shadow: horizontal-offset vertical-offset blur spread color inset;
}

horizontal-offset: Khoảng cách theo chiều ngang của bóng đổ so với phần tử. Giá trị dương dịch chuyển bóng đổ sang phải, còn giá trị âm dịch chuyển bóng đổ sang trái.

vertical-offset: Khoảng cách theo chiều dọc của bóng đổ so với phần tử. Giá trị dương đẩy bóng đổ xuống dưới, còn giá trị âm đẩy bóng đổ lên trên.

blur (không bắt buộc): Bán kính làm mờ của bóng đổ. Giá trị lớn hơn tạo ra bóng đổ mờ hơn. Nếu bỏ qua, giá trị mặc định là 0 (không làm mờ).

spread (tùy chọn): Bán kính lan rộng của bóng đổ. Giá trị dương làm bóng đổ lan rộng, còn giá trị âm làm bóng đổ thu nhỏ.

color (không bắt buộc): Màu của bóng đổ. Bạn có thể chỉ định màu bằng tên màu, giá trị thập lục phân, giá trị RGB hoặc giá trị HSL.
inset (không bắt buộc): Chuyển bóng đổ bên ngoài (outset) thành bóng đổ bên trong.

Ví dụ:

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

.button {
    box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
}

Trong ví dụ này, tất cả phần tử <div> đều có bóng hộp với độ lệch ngang là 5px, độ lệch dọc là 5px, bán kính làm mờ là 10px và màu xám. Các phần tử có lớp button có bóng hộp với độ lệch ngang là 2px, độ lệch dọc là 2px, bán kính làm mờ là 5px, bán kính lan rộng là 2px và màu đen bán trong suốt (rgba(0, 0, 0, 0.5)).

Thử thách

Dễ

Bạn được cung cấp một tài liệu HTML có một phần tử (<div>) và một đoạn văn (<p>). Nhiệm vụ của bạn là dùng thuộc tính box-shadow để thêm hiệu ứng đổ bóng cho các phần tử này. Làm theo các bước dưới đây:

Viết một quy tắc CSS nhắm đến phần tử <div>. Đặt box-shadow thành 10px 10px 5px gray.
Viết một quy tắc CSS nhắm đến phần tử <p>. Đặt box-shadow thành -5px -5px 10px 2px rgba(0, 0, 0, 0.7).

Tự làm thử

<html>
<head>
    <title>Box Shadow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>This is a division with a box shadow.</div>
    <br>
    <p>This is a paragraph with a box shadow.</p>
</body>
</html>