Nhà phát triển / CSS
Trình tạo box-shadow CSS
Tạo box-shadow CSS trực quan với độ lệch, độ mờ, độ lan, màu sắc, độ trong suốt, bóng bên trong và nhiều lớp; có mẫu cài đặt sẵn, xem trước trực tiếp và sao chép CSS.
Trình tạo box-shadow CSS: Mỗi lớp sẽ trở thành một bóng trong danh sách box-shadow, gồm độ lệch ngang và dọc, bán kính làm mờ, độ lan và màu được viết bằng rgb(), với độ trong suốt đặt sau dấu gạch chéo. Các lớp được vẽ theo thứ tự lớp đầu tiên nằm trên cùng. Bạn có thể thay đổi bán kính bo góc, màu sắc và nền của hộp xem trước để khớp với thiết kế; bóng cũng bo theo các góc giống như trên trang của bạn. Chạy 100% cục bộ trong trình duyệt của bạn, không có tệp nào được tải lên máy chủ.
- Danh mục
- Công cụ lập trình viên
- Lượt chạy
- Trong trình duyệt của bạn
- Chi phí
- Miễn phí · không cần đăng ký
- Trạng thái khả dụng
- Sẵn sàng sử dụng
Chạy hoàn toàn trong trình duyệt của bạn
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
Các giá trị lần lượt là độ lệch sang phải, độ lệch xuống dưới, độ mờ, độ lan và màu. Nhiều lớp mỏng trông tự nhiên hơn một bóng đậm; các lớp sau được vẽ bên dưới các lớp trước.
Cài đặt sẵn
Độ nổi
Các hệ thống thiết kế dùng bóng đổ để thể hiện một vật nổi cách mặt trang bao xa: thẻ ở trạng thái bình thường có bóng nhỏ, gọn, còn menu hoặc hộp thoại có bóng lớn và mềm hơn. Duy trì một vài cấp độ cố định thay vì dùng bóng khác nhau ở khắp nơi sẽ giúp giao diện trông nhất quán.
Bóng đổ trên nền tối hầu như không hiện rõ; trong trường hợp đó, bề mặt có màu sáng hơn hoặc đường viền mảnh cũng tạo hiệu quả tương tự. Kết hợp bóng đổ với dải chuyển màu CSS cho các nút và thẻ.
Bóng đổ và hiệu suất
Độ mờ lớn cần nhiều tài nguyên kết xuất hơn độ mờ nhỏ, điều này đáng lưu ý khi có nhiều phần tử có bóng đổ cùng cuộn hoặc chuyển động. Để tạo hiệu ứng bóng đổ khi di chuột, cách mượt hơn là dùng độ mờ để hiện dần một bóng đổ thứ hai, đậm hơn trên phần tử giả, thay vì thay đổi chính box-shadow ở mọi khung hình.
Cách sử dụng
- Bắt đầu với một mẫu cài đặt sẵn hoặc điều chỉnh độ lệch, độ mờ, độ lan và độ trong suốt của lớp đầu tiên.
- Thêm các lớp để tạo bóng mềm mại, chân thực hơn hoặc chọn bóng bên trong để đặt bóng ở phía trong hộp.
- Sao chép khai báo box-shadow.
Quyền riêng tư và giới hạn
Mọi thứ đều chạy trong trình duyệt của bạn; bóng cuối cùng chỉ được lưu trong trình duyệt này.
Công cụ liên quan
Câu hỏi thường gặp
Bốn số trong box-shadow là gì?
Đó là độ lệch ngang (giá trị dương di chuyển bóng sang phải), độ lệch dọc (giá trị dương di chuyển bóng xuống dưới), bán kính làm mờ (giá trị lớn hơn tạo bóng mềm hơn và không thể là số âm) và độ lan (giá trị dương làm bóng lớn hơn hộp, giá trị âm làm bóng nhỏ hơn). Màu được đặt ở cuối.
Làm thế nào để tạo bóng trông tự nhiên?
Hãy dùng độ trong suốt thấp, lệch bóng xuống dưới như thể ánh sáng chiếu từ phía trên và kết hợp hai hoặc nhiều lớp: một lớp nhỏ, sắc nét hơn ở gần hộp cùng một lớp lớn, mềm hơn ở xa. Độ lan hơi âm sẽ ngăn vùng làm mờ lớn hiển thị ở hai bên.
Bóng bên trong làm gì?
Tùy chọn này vẽ bóng ở phía trong hộp thay vì bên ngoài, khiến hộp trông như bị ấn lõm, phù hợp với các trường nhập liệu và nút được nhấn.
Tại sao bóng không hiển thị trên hình ảnh?
box-shadow được vẽ quanh hộp của phần tử, không phải quanh hình dạng của ảnh bên trong. Để tạo đường viền theo hình dạng của PNG trong suốt, hãy dùng CSS filter drop-shadow() thay thế.
Công cụ miễn phí · trong trình duyệt của bạn lượt chạy · không cần tài khoản