Ngọc Thanh - 35
- 17/07/2025
Ngọc Thanh Thuộc tính box-shadow trong CSS là một loại thuộc tính của CSS dùng để đổ bóng cho các thẻ HTML, bao gồm đổ bóng ở ngoài hoặc bên trong, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính box-shadow trong CSS
Thuộc tính box-shadow trong CSS là gì?
Thuộc tính box-shadow trong CSS là một loại thuộc tính của CSS dùng để đổ bóng cho các thẻ HTML, bao gồm đổ bóng ở ngoài hoặc bên trong, giúp thẻ HTML trở nên mượt mà hơn khi xuất hiện trên giao diện website.
Các hiệu ứng của Thuộc tính box-shadow trong CSS
Css box-shadow mặc định
box-shadow: 5px 10px #333
Cột 1 là đẩy từ trái qua 5px; cột 2 đẩy từ trên xuống 10px, cột 3 là màu của box-shadow.
Css box-shadow làm mờ
box-shadow: 0 4px 4px rgba(79, 79, 79, .25);
box-shadow: 0px 4px 4px #333;
Cột 1 số px đẩy từ bên trái qua, cột 2 quy định chiều cao độ mờ ở dưới, cột 3 độ dày làm mờ, cột 4 mã màu (có thể màu hex cho opacity).
Css box-shadow theo bán kính
box-shadow: 0px 10px 20px 5px #888888;
Cột 1 là số px đẩy từ bên trái qua, cột 2 là số px đẩy từ trên xuống, cột 3 là số độ mờ, cột 4 là chiều cao độ mờ, cột 5 là màu sắc.
Css box-shadow bên trong
box-shadow: 0px 0px 10px red inset;
box-shadow: 20px 40px 10px red inset;
Cột 1 là độ dày bên trái, cột 2 là độ dày ở trên, cột 3 là mức độ làm mờ, cột 4 là màu sắc, cột inset quy định box-shadow ở bên trong.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính box-shadow trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
