ตัวสร้างวงกลม CSS — รัศมีเส้นขอบ 50%
ออกแบบรัศมีเส้นขอบ CSS ด้วยสายตา: แถบเลื่อนมุมอิสระสี่ตัวในหน่วย px หรือเปอร์เซ็นต์ ทางลัดสำหรับลิงก์ทุกมุมสำหรับแวดวงและเม็ดยาทันที รวมถึงโหมด Blob แบบออร์แกนิกที่มีรูปร่างแบบสุ่ม
ผลลัพธ์
หน้านี้จะเปิดตัวสร้างรัศมีเส้นขอบโดยเชื่อมโยงทั้งสี่มุมและตั้งค่าเป็น 50% ซึ่งเป็นค่าที่จะเปลี่ยนกล่องให้เป็นวงกลมโดยไม่ต้องใช้อะไรเลยนอกจาก CSS พูดตามตรง: ในกล่องสี่เหลี่ยมสิ่งนี้ทำให้เกิดวงกลมที่สมบูรณ์แบบ แต่ในกล่องสี่เหลี่ยมนั้น 50% เดียวกันนั้นจะสร้างวงรีเหมือนสนามกีฬา เนื่องจากแต่ละมุมจะปัดเศษจากไตรมาสของตัวเองเท่านั้น
ความแตกต่างดังกล่าวมีความสำคัญเนื่องจากรัศมีเส้นขอบ 50% เป็นวิธีเดียวที่ใช้กันมากที่สุดในการสร้างอวตารทรงกลม ป้ายไอคอน และจุดสถานะใน CSS ซึ่งง่ายกว่าการตัดวงกลมด้วยมาสก์หรือการวาดวงกลมใน SVG และยังคงความคมชัดในทุกขนาด เนื่องจากเป็นเปอร์เซ็นต์ที่สัมพันธ์กัน ไม่ใช่รัศมีพิกเซลคงที่
เปลี่ยนกล่องเป็นขนาดสี่เหลี่ยมจัตุรัสคงที่ใน CSS ของคุณเองเพื่อล็อคไว้ในวงกลมที่สมบูรณ์แบบ หรือปล่อยให้มันเป็นสี่เหลี่ยมโดยตั้งใจให้มีรูปร่างเหมือนเม็ดยา ไม่ว่าจะด้วยวิธีใด มุมต่างๆ จะเชื่อมโยงกันที่นี่ ดังนั้นแถบเลื่อนเดี่ยวจะซิงค์ทั้งสี่ให้ตรงกันในขณะที่คุณคัดลอก CSS ที่เป็นผลลัพธ์