⬭ เครื่องสร้าง CSS Border-Radius

เกี่ยวกับ

เครื่องสร้าง CSS Border-Radius นี้ให้โหมดการแก้ไขสามแบบในเครื่องมือที่ใช้งานได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต: โหมดง่าย ปรับรัศมีทั้งสี่มุมพร้อมกัน โหมดแต่ละมุม ให้คุณปรับแต่งแต่ละมุมได้อย่างละเอียด และโหมดอีลิปติก ปลดล็อกรัศมีแนวนอนและแนวตั้งแยกกันสำหรับแต่ละมุม — ใช้ประโยชน์จากความยืดหยุ่นของรูปแบบ CSS border-radius อย่างเต็มที่. แผนภูมิมุม SVG แบบเรียลไทม์แสดงการเปลี่ยนแปลงทุกครั้ง และปุ่ม Blob Randomize ใช้อัลกอริทึมสุ่มแบบเข้ารหัสเพื่อสร้างรูปร่างอินทรีย์ที่เป็นที่นิยมในการออกแบบ UI รูปแบบสมัยใหม่. เนื่องจากทุกอย่างทำงานในเบราว์เซอร์ของคุณ ดีไซน์ของคุณจะปลอดภัย และเครื่องมือยังทำงานได้แม้ไม่มีการเชื่อมต่ออินเทอร์เน็ต

วิธีใช้งาน

1. เลือกโหมด — Simple (ทั้งหมด) Per-Corner หรือ Elliptic (รัศมี x/y แยกกัน) — โดยใช้ปุ่มที่อยู่ด้านบนของแผงควบคุม
2. ลากแถบเลื่อนหรือพิมพ์ค่าโดยตรงในช่องตัวเลขเพื่อกำหนดรัศมีสำหรับแต่ละมุม ภาพตัวอย่างและแผนภูมิ SVG จะอัปเดตทันที
3. คลิก Blob Randomize เพื่อสร้างรูปร่าง blob ที่มีรูปทรงอินทรีย์แบบสุ่มโดยใช้รัศมีวงรีที่เป็นอิสระ — เหมาะสำหรับองค์ประกอบ UI ตกแต่งและพื้นหลังตัวแทน
4. ตรวจสอบ CSS ย่อที่สร้างขึ้นในกล่องผลลัพธ์ — เครื่องมือจะใช้ไวยากรณ์ที่สั้นที่สุดที่ถูกต้องโดยอัตโนมัติ (เช่น รวมค่าที่เหมือนกัน)
5. คลิก Copy CSS เพื่อคัดลอกโค้ดไปยังคลิปบอร์ดของคุณ จากนั้นวางโค้ดโดยตรงลงในไฟล์สไตล์ชีตหรือเครื่องมือออกแบบของคุณ

คำถามที่พบบ่อย

เครื่องมือสร้างรัศมีขอบ CSS นี้เป็นอิสระทั้งหมดหรือไม่?

ใช่ 100% ฟรีโดยไม่ต้องสร้างบัญชี ไม่ต้องสมัครสมาชิก และไม่มีข้อจำกัดแฝง ให้เปิดหน้าและเริ่มสร้าง CSS รัศมีขอบทันที

เครื่องมือนี้ทำงานได้โดยไม่มีการเชื่อมต่ออินเทอร์เน็ตหรือไม่?

ใช่ เครื่องมือนี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณโดยไม่มีการเรียกใช้เซิร์ฟเวอร์ เมื่อหน้าเว็บโหลดเสร็จแล้ว คุณสามารถตัดการเชื่อมต่ออินเทอร์เน็ตและมันจะยังคงทำงานต่อได้ ตั้งค่าล่าสุดของคุณยังถูกบันทึกไว้ในเบราว์เซอร์ของคุณด้วย

ข้อมูลการออกแบบของฉันจะถูกเก็บเป็นความลับหรือไม่?

แน่นอน ไม่มีข้อมูลใดเลยที่จะออกจากเบราว์เซอร์ของคุณ — ไม่มีการอัปโหลด ไม่มีการวิเคราะห์ข้อมูลของคุณ และไม่มีการเก็บข้อมูลในเซิร์ฟเวอร์ ทุกอย่างจะอยู่ในอุปกรณ์ของคุณ

โหมดวงรีทำอะไรได้บ้าง?

โหมดวงรีช่วยให้คุณตั้งค่ารัศมีแนวนอน (x) และแนวนอน (y) แยกกันสำหรับแต่ละมุมทั้งสี่ ซึ่งจะผลิตรูปแบบย่อของ CSS border-radius ที่สมบูรณ์ด้วยสัญลักษณ์ slash — ตัวอย่างเช่น border-radius: 40% 20% / 20% 40% ซึ่งเปิดโอกาสให้สร้างรูปร่างที่ไม่สมมาตรและคล้ายไข่ซึ่งโหมด Simple และ Per-Corner ไม่สามารถสร้างได้

ปุ่ม Blob Randomize ใช้ทำอะไร?

Blob Randomize ใช้อัลกอริทึมสุ่มที่ปลอดภัยทางการเข้ารหัสเพื่อสร้างรูปร่างอินทรีย์ที่ไม่สมมาตรโดยการกำหนดรัศมีวงรีแบบสุ่มให้กับการรวมมุมทั้ง 8 แบบ ใช้ได้ดีสำหรับการสร้างรูปร่าง blob ที่ไหลลื่นซึ่งพบได้บ่อยในหน้าเว็บสมัยใหม่ รูปโปรไฟล์ และพื้นหลังตกแต่ง — ด้วยการคลิกเพียงครั้งเดียว

เครื่องมือนี้จะอัปโหลดข้อมูลของฉันหรือไม่?

ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ดังนั้นข้อมูลของคุณจึงไม่เคยออกจากอุปกรณ์ของคุณ — และหลังจากโหลดหน้าแล้วยังใช้งานแบบออฟไลน์ได้ด้วย