Những điểm chính
- 01Mỗi tham số box-shadow có thanh trượt riêng của nó cộng với đầu vào số cho điều chỉnh độ chính xác pixel.
- 02Chuyển đổi Inset chuyển đổi giữa bóng rơi và bóng nội bộ cho các hiệu ứng được nhấn hoặc neumorphic.
- 03Màu và độ mờ được kiểm soát riêng biệt, xuất ra rgba() cho CSS dễ đọc.
- 04Xem trước sử dụng thuộc tính CSS thực tế trên một phần tử thực tế — những gì bạn thấy chính xác là những gì bảng kiểu của bạn hiển thị.
Tại Sao Sử Dụng Máy Tạo Box-Shadow Trực Quan
CSS box-shadow nhận tới sáu giá trị — bù ngang, bù dọc, bán kính mờ, bán kính lây lan, màu và từ khóa inset tùy chọn. Nhập chúng từ bộ nhớ hoạt động cho các bóng đơn giản, nhưng đối với bất cứ điều gì tinh tế hơn — một phát sáng chặt chẽ, một bóng sâu, một lớp độ cao mềm — bạn đoán và tải lại cho đến khi cái gì đó trông đúng.
Một máy tạo trực quan sụp đổ vòng lặp lặp lại đó. Di chuyển một thanh trượt, thấy sự thay đổi tức thì và chỉ sao chép khi bạn hài lòng. Máy Tạo Box-Shadow của Handytool chạy hoàn toàn trong trình duyệt của bạn, vì vậy xem trước là thuộc tính CSS thực tế được áp dụng cho một phần tử thực tế — không có sự khác biệt kỹ thuật giữa công cụ và trang thực tế của bạn.
Cách Thiết Kế Bóng Hộp
- 01
Điều chỉnh bù ngang và dọc
Giá trị dương di chuyển bóng sang phải và xuống. Giá trị âm di chuyển nó sang trái và lên. Một bóng có tâm (0, 0) tạo ra hiệu ứng phát sáng.
- 02
Đặt bán kính mờ
Giá trị mờ cao hơn tạo ra bóng mềm hơn, khuếch tán hơn. Mờ không tạo ra một bóng rắn, sơ lược rắn.
- 03
Điều chỉnh bán kính lây lan
Lây lan dương phóng to bóng trước khi làm mờ. Lây lan âm co nó, điều này hữu ích cho những bóng dưới phần tử chặt chẽ.
- 04
Chọn một màu và độ mờ
Sử dụng bộ chọn màu để chọn sắc thái bóng, sau đó giảm độ mờ cho sự tinh tế. Đầu ra sử dụng rgba() để giữ cho các giá trị dễ đọc.
- 05
Chuyển đổi inset nếu cần
Inset chuyển đổi từ một bóng rơi thành một bóng nội bộ — hữu ích cho các nút được nhấn, đầu vào lõm và bề mặt neumorphic.
- 06
Sao chép khai báo CSS
Nhấp vào Sao chép để lấy giá trị box-shadow đầy đủ và dán nó vào bảng kiểu của bạn.
Không Tải Lên, Không Tài Khoản
Máy tạo hoàn toàn là phía máy khách. Lựa chọn màu, giá trị số và trạng thái xem trước của bạn ở lại trong trình duyệt của bạn — không có gì được gửi đến máy chủ. Không có tài khoản để tạo và không có giới hạn sử dụng.
Vì phần tử xem trước sử dụng thuộc tính CSS box-shadow thực tế, đầu ra chính xác theo định nghĩa — không có kỹ thuật hiển thị canvas hoặc xấp xỉ ảnh chụp liên quan. Giá trị pixel bạn sao chép là giá trị pixel mà trình duyệt áp dụng.
Câu Hỏi Thường Gặp Về Box-Shadow Generator
Giá Trị Lan Rộng Làm Gì?
Lây lan dương phóng to bóng theo tất cả các hướng trước khi áp dụng mờ; lây lan âm co nó. Hữu ích cho những phát sáng sắc nét, được xác định khi kết hợp với mờ thấp.
Tôi Có Thể Thêm Nhiều Bóng Hộp Không?
Máy tạo này xuất một bóng tại một thời điểm. Để sắp xếp chúng, sao chép giá trị và tách các bóng dài bằng dấu phẩy trong CSS của bạn — box-shadow chấp nhận một danh sách được phân tách bằng dấu phẩy.
Tại Sao Bóng Inset Của Tôi Không Nhìn Thấy?
Bóng Inset được vẽ bên trong phần tử, vì vậy chúng cần một màu nền hoặc hàm bạn có thể thấy để hiển thị. Họ sẽ không xuất hiện trên các phần tử trong suốt hoặc không kích thước.
Xem Trước Có Chính Xác Pixel Không?
Có — xem trước sử dụng thuộc tính CSS box-shadow thực tế trên một phần tử DOM thực tế, vì vậy những gì bạn thấy chính xác là những gì bảng kiểu của bạn sẽ tạo ra.
Bóng Neumorphic Là Gì?
Neumorphism sử dụng hai bóng — một ánh sáng và một bóng tối — bù lệch theo các hướng ngược lại để làm cho một phần tử xuất hiện nâng hoặc bị nhấn từ một bề mặt phẳng. Cả hai bóng thường được inset cho biến thể nhấn.