Trình tạo Box Shadow CSS
Trình tạo box-shadow CSS trực tuyến miễn phí. Tạo bóng đẹp trực quan với offset, blur, spread, màu và inset có thể điều chỉnh. Xem trước trực tiếp và sao chép mã ngay lập tức.
CSS box-shadow là gì?
CSS box-shadow là một thuộc tính CSS thêm hiệu ứng bóng xung quanh khung của một phần tử. Nó cho phép bạn tạo bóng đổ, bóng bên trong và nhiều lớp bóng bằng cách chỉ định offset, bán kính blur, bán kính spread và giá trị màu sắc.
Các tham số của box-shadow là gì?
Thuộc tính box-shadow chấp nhận nhiều giá trị: offset ngang (X), offset dọc (Y), bán kính blur, bán kính spread, màu sắc và từ khóa inset tùy chọn. Bạn cũng có thể chỉ định nhiều bóng được phân tách bằng dấu phẩy.
Từ khóa inset là gì?
Từ khóa inset thay đổi bóng từ bóng bên ngoài (bóng đổ) thành bóng bên trong. Khi inset được chỉ định, bóng được vẽ bên trong viền của phần tử thay vì bên ngoài, tạo hiệu ứng chèn.
Bán kính blur là gì?
Bán kính blur xác định mức độ mờ của cạnh bóng. Giá trị 0 tạo ra một cạnh sắc nét và rắn chắc. Giá trị lớn hơn tạo ra một bóng mờ hơn, mềm mại hơn mở rộng xa hơn khỏi phần tử.
Bán kính spread là gì?
Bán kính spread mở rộng hoặc thu nhỏ kích thước bóng. Giá trị dương làm cho bóng lớn hơn phần tử, trong khi giá trị âm làm cho nó nhỏ hơn. Điều này ảnh hưởng đến bóng trước khi blur được áp dụng.
Làm thế nào để tạo nhiều bóng?
Bạn có thể tạo nhiều bóng bằng cách phân tách mỗi định nghĩa bóng bằng dấu phẩy. Mỗi bóng có thể có các giá trị offset, blur, spread và màu sắc khác nhau. Các bóng được áp dụng theo thứ tự chúng được khai báo, với bóng đầu tiên ở trên cùng.
Tôi có thể sử dụng màu RGBA cho bóng không?
Có, bạn có thể sử dụng bất kỳ định dạng màu CSS nào bao gồm RGBA, HSLA, HEX hoặc màu được đặt tên. RGBA và HSLA đặc biệt hữu ích để tạo bóng bán trong suốt hòa trộn tự nhiên với nền.
Làm thế nào để sao chép mã CSS được tạo?
Chỉ cần nhấp vào nút "Sao chép mã" trong giao diện trình tạo. Mã CSS sẽ được sao chép vào khay nhớ tạm và có thể được dán trực tiếp vào stylesheet hoặc tệp HTML của bạn.
box-shadow có được hỗ trợ trong tất cả các trình duyệt không?
Có, box-shadow được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm Chrome, Firefox, Safari, Edge và Opera. Nó đã là một phần của CSS3 từ năm 2011 và có khả năng tương thích trình duyệt xuất sắc.
box-shadow có ảnh hưởng đến hiệu suất không?
box-shadow có ảnh hưởng tối thiểu đến hiệu suất của các trình duyệt hiện đại. Tuy nhiên, việc sử dụng nhiều bóng phức tạp với bán kính blur lớn trên nhiều phần tử có thể ảnh hưởng đến hiệu suất kết xuất, đặc biệt là trên thiết bị di động.
Các trường hợp sử dụng phổ biến của box-shadow là gì?
Các cách sử dụng phổ biến bao gồm tạo hiệu ứng nâng cao thẻ, thêm chiều sâu cho nút, tạo trường biểu mẫu chèn, triển khai bóng material design và thêm phân tách trực quan giữa các phần tử chồng chéo.
Tôi có thể animat box-shadow không?
Có, box-shadow có thể được animat bằng cách sử dụng chuyển tiếp hoặc animation CSS. Tuy nhiên, animat box-shadow có thể tốn kém hiệu suất. Để có hiệu suất tốt hơn, hãy xem xét sử dụng pseudo-element với chuyển tiếp opacity.