Khi thiết kế một phần tử trong CSS, bạn có thể quyết định rằng bạn muốn tạo hiệu ứng đổ bóng xung quanh khung của phần tử đó. Ví dụ:bạn có thể muốn tạo một hình ảnh có bóng bên dưới hình ảnh.
Đó là nơi mà thuộc tính box-shadow của CSS có thể hữu ích. Thuộc tính box-shadow cho phép bạn thêm các hiệu ứng đổ bóng xung quanh khung của một phần tử. Hướng dẫn này sẽ thảo luận, với các ví dụ, cách sử dụng thuộc tính box-shadow của CSS để thêm hiệu ứng đổ bóng vào các phần tử web.
Bóng hộp CSS
Thuộc tính box-shadow thêm bóng vào một phần tử. Thuộc tính box-shadow có thể được áp dụng cho hầu hết mọi phần tử HTML và thuộc tính này cũng có thể được sử dụng với các phần tử có các góc tròn.
Cú pháp cho thuộc tính box-shadow như sau:
box-shadow: offset-x offset-y blur-radius spread color;
Hãy chia nhỏ cú pháp này và thảo luận về từng yếu tố:
- offset-x là độ lệch ngang của bóng (bắt buộc).
- offset-y là độ lệch dọc của bóng (bắt buộc).
- bán kính mờ là hiệu ứng làm mờ được thêm vào bóng (tùy chọn).
- spread là bán kính lan rộng của hiệu ứng làm mờ (tùy chọn).
- màu là màu của bóng (tùy chọn, theo mặc định là màu đen).
Bây giờ chúng ta đã biết cú pháp của thuộc tính box-shadow, chúng ta có thể khám phá một vài ví dụ về thuộc tính đang hoạt động. Trong các ví dụ dưới đây, chúng tôi sẽ sử dụng phần tử HTML sau mà chúng tôi muốn tạo kiểu:
<html> <div> <p>This is a box.</p> </div>
Phần tử HTML của chúng tôi có kiểu sau:
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
Đây là cách hộp mặc định của chúng tôi xuất hiện:Nút 
trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Hộp của chúng tôi rộng 100px và cao 200px. Nội dung của hộp của chúng ta có phần đệm 10px, có nghĩa là có khoảng cách 10px giữa văn bản bên trong hộp và đường viền của hộp. Ngoài ra, hộp của chúng tôi có màu xanh nhạt.
Bóng ngang và bóng dọc
Bóng đổ cơ bản nhất mà bạn có thể tạo với thuộc tính box-shadow là bóng đổ ngang và bóng dọc. Dưới đây là một ví dụ về hộp của chúng tôi với bóng ngang và bóng dọc:
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
Nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi đã chỉ định thuộc tính offset-x và offset-y và đặt cả hai thành 10px. Điều này tạo ra một bóng đổ có màu đen và được bù đắp bằng 10 pixel trên cả hai trục, như bạn có thể thấy ở trên.
Màu bóng
Bạn có thể chỉ định màu cho bóng bằng thuộc tính color. Giả sử chúng ta muốn bóng của mình có màu xám nhạt. Chúng tôi có thể thay đổi màu của bóng hộp của mình bằng cách sử dụng mã này:
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 10px 10px lightgray;
}
Nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Hộp của chúng tôi bây giờ có một bóng màu xám nhạt.
Hiệu ứng làm mờ bóng
Thuộc tính bán kính mờ được sử dụng để thêm hiệu ứng mờ cho bóng đổ. Giả sử chúng ta muốn bóng của mình có độ mờ 3px, điều này sẽ làm cho nó hơi mờ. Chúng tôi có thể sử dụng mã này để xác định độ mờ cho hộp:
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 10px 10px 3px lightgray;
}
Nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Hộp này tương tự như hộp trong ví dụ cuối cùng của chúng tôi, nhưng nếu bạn nhìn kỹ vào cái bóng, bạn có thể thấy nó bị mờ đi một chút.
Hiệu ứng lan truyền
Khi bạn đang sử dụng thuộc tính box-shadow, bạn có thể thêm bán kính trải rộng vào bóng đổ của mình. Điều này xác định mức độ bóng có thể lan truyền theo mọi hướng. Giả sử chúng ta muốn làm cho bóng của chúng ta trải ra 5px xung quanh chính nó. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 10px 10px 5px 5px lightgray;
}
Nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong ví dụ này, bóng của chúng ta dài hơn một chút. Điều này là do bóng của chúng ta được mở rộng thêm 5px do bán kính trải rộng mà chúng ta đã chỉ định.
Trong mã của chúng tôi, các thuộc tính mà chúng tôi đã chỉ định được sắp xếp theo cách sau:
- offset-x
- offset-y
- mờ
- bán kính
- màu sắc
Nhiều bóng
Thuộc tính box-shadow có thể được sử dụng để thêm nhiều bóng vào một phần tử. Nếu bạn muốn thêm nhiều bóng vào một phần tử, bạn có thể sử dụng cú pháp ở trên và tách các bóng ra bằng dấu phẩy. Đây là cú pháp để tạo nhiều bóng:
box-shadow: shadow1, shadow2;
Khi bạn đang làm việc với nhiều bóng, các giá trị bù đắp phải khác nhau cho mỗi bóng. Nếu không, các bóng của bạn sẽ chồng lên nhau và chỉ bóng đầu tiên được gán một bộ giá trị bù cụ thể mới xuất hiện.
Giả sử chúng ta muốn có cả màu xám nhạt và bóng hồng đằng sau hộp của chúng ta. Chúng tôi có thể tạo những bóng đổ này bằng cách sử dụng mã sau:
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 5px 5px lightgray, 5px 5px pink;
} Mã của chúng tôi trả về:
Inset Shadows
Từ khóa inset có thể được sử dụng để làm cho bóng xuất hiện bên trong một phần tử. Giả sử chúng ta muốn bóng màu xám nhạt của chúng ta xuất hiện bên trong hộp của chúng ta. Chúng tôi có thể thực hiện điều này bằng cách sử dụng mã sau:
<html>
<div>
<p>This is a box.</p>
</div>
<style>
div {
height: 100px;
width: 200px;
padding: 10px;
background-color: lightblue;
}
div {
box-shadow: 10px 10px;
}
div {
box-shadow: 5px 5px lightgray inset;
}
Nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Từ khóa inset cho phép chúng ta thay đổi bóng của mình từ bóng ngoài thành bóng trong như bạn có thể thấy ở trên.
Thuộc tính Box Shadow
Có một số thuộc tính có thể được sử dụng với thuộc tính CSS box-shadow. Đây là bảng tham chiếu của các thuộc tính này:
| Thuộc tính | Mô tả |
| offset-x | Độ lệch của bóng trên trục hoành (x). |
| offset-y | Độ lệch của bóng trên trục dọc (y). |
| mờ | Bán kính mờ của bóng. |
| màu | Màu của bóng. |
| lây lan | Bán kính lan rộng của bóng. |
| bản in | Thay đổi bóng đổ thành bóng bên trong. |
| kế thừa | Kế thừa một bóng đổ từ phần tử mẹ của nó. |
Kết luận
Thuộc tính box-shadow trong CSS được sử dụng để thêm hiệu ứng đổ bóng vào các phần tử HTML.
Hướng dẫn này đã thảo luận, có tham chiếu đến một số ví dụ, cách sử dụng thuộc tính box-shadow để tạo bóng tùy chỉnh. Bây giờ, bạn đã sẵn sàng để bắt đầu tạo bóng CSS của riêng mình như một nhà phát triển web chuyên nghiệp!