- VIE
- VIE
- ENG
Box-shadow CSS là một thuộc tính mới trong CSS. Hãy theo dõi bài viết dưới đây để biết về tính năng cũng như cách sử dụng nhé!
💥💥Kiếm tiền ngay trên website của bạn. Tham gia ngay 💥💥
Contents
Box-shadow là thuộc tính mới trong CSS, nằm trong phiên bản CSS3. Tính năng này có tác dụng tạo bóng cho hộp. Thuộc tính Shadow trong CSS được sử dụng để thiết lập bóng cho các phần tử thành phần trong website.
Thuộc tính box-shadow sử dụng để tạo bóng cho các phần tử có dạng box, có tác dụng với các đường viền, giúp phần tử hiển thị nổi bật tương tự kiểu hộp 3D.
Khi sử dụng box-shadow có một số lưu ý sau:
Đã là bóng thì nó thường mờ (blur) hơn vật chủ, để bổ sung độ mờ cho bóng, ta thêm giá trị nữa đằng sau.
Để thay đổi độ lớn của bóng, bạn thêm tiếp giá trị vào đằng sau độ mờ. Với giá trị -10px; kích thước bóng sẽ giảm đi 10px cả 2 chiều so với kích thước gốc, nghĩa là lúc này, bóng rộng 290px = [300px – 10px] và cao 140px = [150px – 10px];
Để quy định màu cho bóng, bạn thêm mã màu vào, nó nằm ở vị trí cuối cùng.
Bên cạnh việc thực hành với bóng bên ngoài hộp, đôi khi ngay bên trong hộp cũng có bóng, để làm điều này, ta dùng giá trị inset.
| box-shadow: h-offset v-offset blur spread color |
Box-shadow gồm 5 tham số:
Thuộc tính box-shadow với giá trị ngang và dọc nghĩa là: Định vị trí bóng nằm ngang và dọc cho thành phần (có thể dùng số âm), đây là thuộc tính bắt buộc.
| <html>
<head></head> <body> <p>box-shadow</p> </body> </html> |
| p {
background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 150px; } |
p {
background: #cccccc;
border: 5px solid #cc0000;
height: 100px;
width: 150px;
box-shadow: 30px 30px;
-moz-box-shadow: 30px 30px;
-webkit-box-shadow: 30px 30px;
-o-box-shadow: 30px 30px;
-ms-box-shadow: 30px 30px;
}
p {
background: #cccccc;
border: 5px solid #cc0000;
height: 100px;
width: 150px;
box-shadow: -10px -10px;
-moz-box-shadow: -10px -10px;
-webkit-box-shadow: -10px -10px;
-o-box-shadow: -10px -10px;
-ms-box-shadow: -10px -10px;
}
Thuộc tính box-shadow với giá trị độ mờ: Định khoảng cách mờ cho bóng.
p {
background: #cccccc;
border: 5px solid #cc0000;
height: 100px; width: 150px;
box-shadow: 30px 30px 10px;
-moz-box-shadow: 30px 30px 10px;
-webkit-box-shadow: 30px 30px 10px;
-o-box-shadow: 30px 30px 10px;
-ms-box-shadow: 30px 30px 10px;
}
p {
background: #cccccc;
border: 5px solid #cc0000;
height: 100px;
width: 150px;
box-shadow: 30px 30px 30px;
-moz-box-shadow: 30px 30px 30px;
-webkit-box-shadow: 30px 30px 30px;
-o-box-shadow: 30px 30px 30px;
-ms-box-shadow: 30px 30px 30px;
}
Thuộc tính box-shadow với giá trị độ lan rộng: Tăng hoặc giảm độ lan rộng cho bóng.
p {
background: #cccccc;
border: 5px solid #cc0000;
height: 100px; width: 150px;
box-shadow: 30px 30px 10px 10px;
-moz-box-shadow: 30px 30px 10px 10px;
-webkit-box-shadow: 30px 30px 10px 10px;
-o-box-shadow: 30px 30px 10px 10px;
-ms-box-shadow: 30px 30px 10px 10px;
}
p {
background: #cccccc;
border: 5px solid #cc0000;
height: 100px; width: 150px;
box-shadow: 30px 30px 10px 30px;
-moz-box-shadow: 30px 30px 10px 30px;
-webkit-box-shadow: 30px 30px 10px 30px;
-o-box-shadow: 30px 30px 10px 30px;
-ms-box-shadow: 30px 30px 10px 30px;
}
Thuộc tính box-shadow với giá trị màu sắc: Định màu sắc cho bóng.
p {
background: #cccccc;
border: 5px solid #cc0000;
height: 100px; width: 150px;
box-shadow: 30px 30px 10px 10px #0000cc;
-moz-box-shadow: 30px 30px 10px 10px #0000cc;
-webkit-box-shadow: 30px 30px 10px 10px #0000cc;
-o-box-shadow: 30px 30px 10px 10px #0000cc;
-ms-box-shadow: 30px 30px 10px 10px #0000cc;
}
Thuộc tính box-shadow với giá trị inset: Thay đổi bóng từ ngoài tối vào trong sáng.
p {
background: #cccccc;
border: 5px solid #cc0000;
height: 100px; width: 150px;
box-shadow: 30px 30px 10px 10px #0000cc inset;
-moz-box-shadow: 30px 30px 10px 10px #0000cc inset;
-webkit-box-shadow: 30px 30px 10px 10px #0000cc inset;
-o-box-shadow: 30px 30px 10px 10px #0000cc inset;
-ms-box-shadow: 30px 30px 10px 10px #0000cc inset;
}
Hy vọng bài viết trên của tenten đã giúp cho bạn hiểu thêm về Box-shadow CSS. Hãy chia sẻ bài viết để lan tỏa kiến thức đến nhiều người hơn nữa nhé!
MiraWEB – Tạo website tự động bằng AI trong 30 giây
| Box-shadow CSS online | Box-shadow CSS beautiful |
| Box-shadow CSS examples | CSS box-shadow property |
| Box-shadow CSS là gì | Box-shadow: inset |
| Box-shadow CSS codepen | Box-shadow opacity |
Hiệu ứng chuyển động Animation CSS cho người mới bắt đầu
Normalize CSS CDN là gì? 05 điểm khác biệt với Reset CSS
Thuộc tính Float CSS là gì? Phân biệt Float và Clear trong CSS
