เครื่องมือสร้าง CSS Border Radius
ควบคุมค่า border-radius ทั้ง 8 ค่าด้วยภาพ
สร้างรูปทรงที่นุ่มนวล (blob) พร้อมดูตัวอย่างแบบเรียลไทม์
เกี่ยวกับ
เครื่องมือสร้าง CSS Border Radius ช่วยให้คุณควบคุม ค่า border-radius ทั้ง 8 ค่า (รัศมีแนวนอนและแนวตั้งของแต่ละมุมทั้ง 4 มุม) ด้วยภาพและดูตัวอย่างผลลัพธ์แบบเรียลไทม์
นอกเหนือจากมุมโค้งมนปกติแล้ว คุณยังสามารถสร้าง รูปทรงที่นุ่มนวลซับซ้อน (blob) เช่น border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% — ซึ่งเป็นที่นิยมในการตกแต่งส่วนฮีโร่ การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณโดยตรง
วิธีใช้งาน
เลือกพรีเซ็ต
เริ่มต้นจากพรีเซ็ตที่มีอยู่ (วงกลม, ใบไม้, หยดน้ำ ฯลฯ) เพื่อให้ได้รูปทรงพื้นฐานอย่างรวดเร็ว จากนั้นปรับแต่งรายละเอียดด้วยแถบเลื่อน
ปรับแถบเลื่อน
ลากแถบเลื่อนแนวนอนและแนวตั้งสำหรับแต่ละมุม ตัวอย่างจะได้รับการอัปเดตทันที
คัดลอก CSS
คลิก "คัดลอก" เพื่อคัดลอก CSS ที่สร้างขึ้นไปยังคลิปบอร์ดของคุณและวางลงในสไตล์ชีต (stylesheet) ของคุณ
คำศัพท์
- border-radius
- คุณสมบัติ CSS เพื่อทำให้มุมขององค์ประกอบโค้งมน รองรับทั้ง px และ % ช่วยให้คุณกำหนดค่าสำหรับแต่ละมุมแยกกันได้
- รัศมีแนวนอน / แนวตั้ง
- รัศมีสองเส้นของวงรีที่กำหนดโดย border-radius เครื่องหมาย "/" ใช้เพื่อแยกค่าแนวนอน (ด้านหน้า) และค่าแนวตั้ง (ด้านหลัง)
- Blob (รูปทรงอิสระ)
- รูปทรงออร์แกนิกแบบอสมมาตรที่สร้างขึ้นโดยการตั้งค่า border-radius แบบสุ่มหรือไม่เท่ากันในทั้ง 8 แกน
- clip-path
- คุณสมบัติ CSS สำหรับการตัดองค์ประกอบให้เป็นรูปทรงที่กำหนดเอง ยืดหยุ่นกว่า border-radius แต่ไวยากรณ์ก็ซับซ้อนกว่าเช่นกัน
- Shorthand (การเขียนแบบย่อ)
- border-radius: 10px 20px 30px 40px — วิธีระบุค่าพารามิเตอร์ของทั้ง 4 มุมในการประกาศเพียงครั้งเดียว ใช้ "/" เพื่อแยกแนวนอนและแนวตั้ง
FAQ
- Q.8 ค่าเหล่านั้นคืออะไร?
- แต่ละมุมจากทั้ง 4 มุมจะมีรัศมีแนวนอนและรัศมีแนวตั้ง รวมทั้งหมด 8 ค่า รูปแบบ: border-radius: A B C D / E F G H.
- Q.ฉันสามารถใช้รูปทรง blob เพื่ออะไรได้บ้าง?
- ตกแต่งพื้นหลังส่วนฮีโร่, มาสก์สำหรับรูปโปรไฟล์, รูปทรงปุ่ม Call to Action (CTA) และอื่นๆ อีกมากมาย
- Q.ข้อมูลถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?
- ไม่ ทุกอย่างถูกสร้างขึ้นในเบราว์เซอร์ของคุณโดยตรง
- Q.มันใช้งานได้บน IE11 หรือไม่?
- border-radius ทำงานได้ตั้งแต่ IE9 เป็นต้นไป การกำหนดรูปวงรี (ด้วย "/") ก็ทำงานได้ตั้งแต่ IE9+ เช่นกัน
- Q.ฉันสามารถใช้กับ Sass หรือ Less ได้หรือไม่?
- ได้ โค้ดที่สร้างขึ้นเป็น CSS มาตรฐาน จึงสามารถใช้งานร่วมกับ Sass, Less และ Stylus ได้โดยตรง
กรณีการใช้งาน
การออกแบบปุ่มและการ์ด
สร้างรูปทรงมุมโค้งที่ไม่ซ้ำใครสำหรับปุ่มและส่วนประกอบการ์ดแทนวงกลมมาตรฐาน
การตกแต่งพื้นหลังด้วย Blob
ใช้รูปทรงออร์แกนิก blob เพื่อตกแต่งบริเวณพื้นหลังส่วนฮีโร่ในหน้าแลนดิ้งเพจ
มาสก์รูปโปรไฟล์
สำรวจวิธีการปรับมุมที่แตกต่างกันสำหรับรูปโปรไฟล์ แทนที่จะใช้รูปสี่เหลี่ยมจัตุรัสหรือรูปวงกลมทั่วไป
เรียนรู้ CSS
ทำความเข้าใจว่า border-radius ทำงานอย่างไรด้วยภาพผ่านการทดลองด้วยแถบเลื่อน
ส่งความคิดเห็น
โปรดแจ้งให้เราทราบความคิดเห็นของคุณเพื่อช่วยปรับปรุงเครื่องมือ
การส่งความคิดเห็นถูกระงับชั่วคราว
เซิร์ฟเวอร์ไม่ว่างหรือระบบป้องกันสแปมทำงานอยู่ โปรดลองอีกครั้งในภายหลัง