Question 1

ไวยากรณ์ border-radius แบบ 8 ค่าหมายความว่าอะไร?

Accepted Answer

ในไวยากรณ์ border-radius: h1 h2 h3 h4 / v1 v2 v3 v4 ค่าก่อนเครื่องหมายทับคือรัศมีแนวนอน (ซ้ายบน ขวาบน ขวาล่าง ซ้ายล่าง) และค่าหลังเครื่องหมายทับคือรัศมีแนวตั้ง การใช้ค่าต่างกันในแต่ละทิศทางต่างหากที่ทำให้เกิดรูปทรงบล็อบอินทรีย์

Question 2

ใช้ CSS ที่สร้างได้อย่างไร?

Accepted Answer

คัดลอกบรรทัด border-radius แล้ววางลงในกฎ CSS ใดก็ได้ของอิลิเมนต์ที่ต้องการจัดรูป เช่น .card { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } ใช้ได้ทั้ง CSS ปกติ Sass, Tailwind arbitrary values และ inline style

Question 3

รูปทรงบล็อบนิยมใช้ที่ไหน?

Accepted Answer

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

Question 4

ขอบมนใช้ได้กับทุกเบราว์เซอร์หรือไม่?

Accepted Answer

ใช่ border-radius รองรับทุกเบราว์เซอร์ยุคใหม่ ทั้ง Chrome, Firefox, Safari, Edge และเบราว์เซอร์มือถือ โดยไม่ต้องใส่เวนเดอร์พรีฟิกซ์

Question 5

ทำให้รูปทรงบล็อบเคลื่อนไหวได้หรือไม่?

Accepted Answer

ได้ border-radius เป็นพร็อพเพอร์ตีที่แอนิเมชันได้ การเพิ่ม CSS transition จึงทำให้รูปทรงบิดเปลี่ยนได้อย่างนุ่มนวล เช่น .blob { transition: border-radius .8s ease; }

Question 6

ไวยากรณ์ 4 ค่ากับ 8 ค่าต่างกันอย่างไร?

Accepted Answer

แบบ 4 ค่าจะกำหนดรัศมีแนวนอนและแนวตั้งของมุมแต่ละมุมให้เท่ากัน ซึ่งเพียงพอสำหรับรูปแคปซูลหรือวงกลม ส่วนแบบ 8 ค่าแยกรัศมีแนวนอนกับแนวตั้ง จึงสร้างรูปทรงอสมมาตรแบบอินทรีย์ได้

Question 7

จะสร้างวงกลมสมบูรณ์แบบได้อย่างไร?

Accepted Answer

ตั้งค่าทั้งแปดเป็น 50% ในอิลิเมนต์สี่เหลี่ยมจัตุรัส หรือใช้ border-radius: 50% ไปเลย อีกวิธีคือเริ่มจากรูปทรงสำเร็จที่ใกล้เคียงวงกลมแล้วปรับต่อ

Question 8

ข้อมูลของฉันถูกอัปโหลดไปไหนหรือไม่?

Accepted Answer

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

Question 9

ใช้กับอิลิเมนต์ที่ไม่ใช่สี่เหลี่ยมจัตุรัสได้หรือไม่?

Accepted Answer

ได้ แต่รัศมีแบบเปอร์เซ็นต์จะคิดตามสัดส่วนขนาดของอิลิเมนต์ สี่เหลี่ยมผืนผ้าจะได้มุมทรงวงรีและหน้าตาต่างจากตัวอย่างจัตุรัส ควรใช้ค่าที่ได้เป็นจุดตั้งต้นแล้วปรับเพิ่ม

ตัวสร้าง Border Radius

วิธีใช้ ตัวสร้าง Border Radius