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.
Cách sử dụng Trình tạo Box Shadow CSS
Thiết kế đổ bóng CSS box-shadow bằng trực quan thay vì đoán mò giá trị. Bộ tạo chạy cục bộ trong trình duyệt và không có gì bạn nhập bị tải lên.
- Đặt H-Offset và V-Offset để dịch bóng sang ngang và lên xuống.
- Tăng Blur để làm mềm viền và dùng Spread để phóng to hay thu nhỏ bóng.
- Chọn Color rồi chỉnh Opacity để bóng trông mềm mại, tự nhiên hơn.
- Tick chọn Inset để vẽ bóng bên trong phần tử thay vì bao quanh.
- Sao chép quy tắc box-shadow hoàn chỉnh từ phần xem trước vào stylesheet của bạn.
Blur nhỏ kết hợp V-Offset dương nhỏ sẽ tạo bóng tiếp xúc tinh tế, chân thực ngay bên dưới phần tử.
Công cụ liên quan
- Trình tạo Border Radius CSS Trình tạo border-radius CSS trực quan. Điều chỉnh từng góc độc lập với xem trước thời gian thực và sao chép mã CSS ngay lập tức.
- Trình tạo Gradient CSS Tạo gradient CSS tuyệt đẹp trực quan. Tạo gradient tuyến tính, hướng tâm và hình nón với nhiều điểm dừng màu, góc và vị trí tùy chỉnh. Sao chép mã CSS sẵn sàng sản xuất ngay lập tức.
- Trình tạo CSS Grid Trình tạo CSS Grid trực quan miễn phí với xem trước trực tiếp. Thiết kế bố cục lưới responsive tương tác và xuất mã CSS sẵn sàng sản xuất ngay.
- Trình tạo CSS Flexbox Trình tạo CSS Flexbox trực quan với xem trước trực tiếp. Điều chỉnh thuộc tính flex và nhận mã CSS sẵn sàng sử dụng.
- Trình Tạo Bo Góc CSS Trình tạo bo tròn sáng tạo miễn phí trực tuyến. Kéo 8 điểm điều khiển hoặc chọn hình blob có sẵn để tạo hình khối CSS hữu cơ và sao chép mã ngay lập tức.
- Trình chuyển đổi màu Trình chuyển đổi màu trực tuyến miễn phí. Chuyển đổi định dạng HEX, RGB, HSL, HSV ngay lập tức với bộ chọn trực quan. 100% riêng tư, chạy trong trình duyệt của bạn.
- Trình tạo easing CSS Trình tạo easing CSS trực tuyến miễn phí. Kéo các điểm điều khiển cubic-bezier trên đường cong tương tác, chọn trong 18 mẫu có sẵn, xem bóng lặp lại liên tục và sao chép hàm thời gian ngay.
- Trình tạo text-shadow CSS Trình tạo text-shadow CSS trực tuyến miễn phí. Xếp nhiều lớp bóng với lệch ngang, làm mờ, màu và độ mờ, thử mẫu Neon, 3D, Retro và sao chép mã CSS ngay.