CSS Box Shadow Generator (หลายชั้นและใส่)
ออกแบบเงากล่อง CSS หลายชั้นเรียบร้อยด้วยการพัดลอกสด, การกระจาย, การสลับใส่ และการส่งออกรหัส Tailwind / CSS ด้วยคลิกเดียว
ทำงานในเบราว์เซอร์ของคุณ ไฟล์ไม่ออกจากอุปกรณ์ ดูวิธีตรวจสอบ
…
วิธีทำ
- 1ขั้นตอนที่ 1: เปิด CSS Box Shadow Generator (หลายชั้นและใส่) และกรอกข้อมูล
พิมพ์ตัวเลขหรือข้อความ เพิ่มไฟล์ หรือเลือกตัวเลือกที่ต้องการ ไม่มีการอัปโหลดใดๆ ทุกอย่างอยู่ในเบราว์เซอร์ของคุณ
- 2ขั้นตอนที่ 2: CSS Box Shadow Generator (หลายชั้นและใส่) ทำอะไรได้บ้าง
ออกแบบเงากล่อง CSS หลายชั้นเรียบร้อยด้วยการพัดลอกสด, การกระจาย, การสลับใส่ และการส่งออกรหัส Tailwind / CSS ด้วยคลิกเดียว.
- 3ขั้นตอนที่ 3: อ่านผลลัพธ์และเปรียบเทียบ
ผลลัพธ์ปรากฏทันที ลองเปลี่ยนค่าหนึ่งค่าเพื่อดูว่าคำตอบเปลี่ยนไปอย่างไร แล้วเลือกตัวเลขที่เหมาะกับกรณีของคุณ
- 4ขั้นตอนที่ 4: คัดลอกหรือบันทึก
คัดลอกผลลัพธ์หรือดาวน์โหลด หากเป็นการตัดสินใจสำคัญ ควรตรวจสอบกับแหล่งข้อมูลทางการหรือที่ปรึกษา
เกี่ยวกับเครื่องมือนี้
เพิ่มความลึกและการยกสูงในการสัมผัสไปยังบัตรและองค์ประกอบ UI ปรับแต่งอับย้ายแนวราบ / สูง, แพร่รัศมี blur, ระยะห่างแพร่, และสีเงาด้วยสไลเดอร์ความไม่ชัดเจน ทดสอบกับพื้นหลังที่เบาและมืด, เปลี่ยนเงาใส่สําหรับภาวะปุ่มที่คัดมา, และสําเนา CSS หรือตาราง Tailwind มาตรฐานทันที
เคล็ดลับเพื่อผลลัพธ์ที่ดีที่สุด
ก่อนเริ่ม ใช้เวลาอ่านตัวเลือกสักครู่และลองเครื่องมือกับตัวอย่างเล็ก ๆ ก่อน ทุกอย่างทำงานในเบราว์เซอร์บนอุปกรณ์ของคุณ สิ่งที่คุณพิมพ์หรือเพิ่มจะไม่ถูกอัปโหลด และการปิดแท็บจะลบทุกอย่าง หากมีอะไรดูไม่ถูกต้อง ให้โหลดหน้าใหม่แล้วลองอีกครั้ง หรือใช้ลิงก์แจ้งปัญหาในหน้านี้เพื่อบอกเราว่าเกิดอะไรขึ้น หากผลลัพธ์ยังดูผิด ให้เปลี่ยนทีละค่าเพื่อดูว่าช่องไหนมีผลมากที่สุด บุ๊กมาร์กหน้านี้หากคุณจะใช้อีก
สรุปสั้น ๆ
- หมวดหมู่: รูปภาพ
- ทำงานในเบราว์เซอร์ ไม่ต้องสมัคร ไม่ต้องอัปโหลด
- ข้อมูลที่คุณกรอกอยู่บนอุปกรณ์ของคุณ
- มีหลายภาษา
- ตรวจสอบเนื้อหาล่าสุด:
คำถามที่พบบ่อย
ผมสร้างเงาตกที่อ่อนโยนและทันสมัยได้อย่างไร
ใช้รัศมีความมืดที่ใหญ่กว่า (20px-40px) การแพร่กระจายลบ (-4px) และความไม่ชัดเจนต่ํา (10%-25%) บนสีสไลท์เข้มสําหรับเงาเรียบสุด
การสนับสนุนนี้ทําให้เกิดเงาภายในหรือไม่
ใช่ เปิดปุ่ม 'ใส่เงา' เพื่อสร้างผลลัพธ์เงาภายใน เหมาะสําหรับสนามการเข้า, ถ้ําและสภาพปุ่มที่กด
ฉันทดสอบภาพเงาได้มั้ยบนการ์ดโหมดมืด
คลิก 'Dark Canvas' เพื่อทดสอบความแตกต่างของเงาบนพื้นหลังที่ลึกและมืด
CSS ที่สร้างขึ้นนั้นมีความสอดคล้องกับบราว์เซอร์ทุกตัวไหม?
ใช่ มันสร้างระบบประกอบการแบบ Box-Shadow ที่สมาธิกับ W3C
