6.1 Thuộc tính box-shadow
Thuộc tính box-shadow trong CSS được sử dụng để thêm bóng cho các phần tử. Thuộc tính này cho phép tạo ra nhiều hiệu ứng hình ảnh đa dạng, cải thiện giao diện của trang web. Hãy xem xét chi tiết cú pháp, giá trị và ví dụ sử dụng của box-shadow.
Cú pháp box-shadow
Thuộc tính box-shadow chấp nhận một hoặc nhiều giá trị, mỗi giá trị xác định các tham số của bóng. Cú pháp tổng quát như sau:
element {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
Các giá trị:
offset-x: độ dịch chuyển bóng ngang. Giá trị dương dịch bóng sang phải, giá trị âm dịch bóng sang tráioffset-y: độ dịch chuyển bóng dọc. Giá trị dương dịch bóng xuống dưới, giá trị âm dịch bóng lên trênblur-radius: bán kính mờ của bóng. Giá trị càng lớn, bóng càng mờ. Giá trị mặc định là 0 (bóng không mờ)spread-radius: bán kính mở rộng của bóng. Giá trị dương tăng kích thước bóng, giá trị âm giảm. Giá trị mặc định là 0color: màu của bóng. Hỗ trợ tất cả các định dạng màu CSS
6.2 Ví dụ sử dụng
Bóng cơ bản:
.shadow-basic {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-basic">Bóng cơ bản</div>
</body>
Bóng với độ mờ:
.shadow-blur {
width: 200px;
height: 200px;
background-color: #2ecc71;
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-blur">Bóng với độ mờ</div>
</body>
Bóng với mở rộng:
.shadow-spread {
width: 200px;
height: 200px;
background-color: #e74c3c;
box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-spread">Bóng với mở rộng</div>
</body>
Bóng bên trong:
.shadow-inset {
width: 200px;
height: 200px;
background-color: #f1c40f;
box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.5);
margin: 20px;
}
<body>
<div class="shadow-inset">Bóng bên trong</div>
</body>
6.3 Thiết lập box-shadow
Chi tiết thiết lập box-shadow:
Dịch chuyển bóng (offset-x và offset-y)
- Giá trị dương: bóng dịch sang phải (
offset-x) và xuống dưới (offset-y) - Giá trị âm: bóng dịch sang trái (
offset-x) và lên trên (offset-y)
Độ mờ của bóng (blur-radius)
- Giá trị 0: bóng sẽ rõ nét, không mờ
- Giá trị dương: giá trị càng lớn, bóng càng mờ
Mở rộng của bóng (spread-radius)
- Giá trị dương: bóng tăng kích thước
- Giá trị âm: bóng giảm kích thước
Màu của bóng (color)
Màu có thể được chỉ định bằng nhiều định dạng khác nhau: tên màu, mã hex, RGB, RGBA, HSL, HSLA.
Bóng bên trong (inset)
Từ khóa inset tạo bóng bên trong phần tử, có thể được sử dụng để tạo hiệu ứng lõm.
Nhiều bóng với các tham số khác nhau:
.multiple-shadows {
width: 200px;
height: 200px;
background-color: #bdc3c7;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 15px rgba(0, 0, 0, 0.3);
margin: 20px;
}
<body>
<div class="multiple-shadows">Nhiều bóng</div>
</body>
GO TO FULL VERSION