Question 1

CSS border-radius คืออะไร?

Accepted Answer

CSS border-radius เป็นคุณสมบัติที่ทำให้มุมของขอบนอกขององค์ประกอบมนขึ้น คุณสามารถตั้งค่าแต่ละมุมอย่างอิสระโดยใช้ค่าหนึ่งถึงสี่ค่า

Question 2

สร้างวงกลมที่สมบูรณ์แบบด้วย border-radius อย่างไร?

Accepted Answer

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

Question 3

สามารถใช้หน่วยใดกับ border-radius ได้บ้าง?

Accepted Answer

Border-radius รองรับ px, %, em, rem, vw, vh และหน่วยความยาว CSS อื่นๆ เปอร์เซ็นต์จะสัมพันธ์กับมิติขององค์ประกอบ

Question 4

ไวยากรณ์แบบย่อของ border-radius คืออะไร?

Accepted Answer

แบบย่อตามรูปแบบ: ซ้ายบน ขวาบน ขวาล่าง ซ้ายล่าง ค่าเดียวใช้กับทุกมุม สองค่าตั้งค่าซ้ายบน/ขวาล่าง และขวาบน/ซ้ายล่าง

Question 5

สามารถสร้างมุมรูปวงรีได้หรือไม่?

Accepted Answer

ได้ โดยใช้ไวยากรณ์เครื่องหมายทับ (/) คุณสามารถกำหนดรัศมีแนวนอนและแนวตั้งแยกต่างหาก ตัวอย่าง border-radius: 50% / 100px

Question 6

border-radius ทำงานกับทุกองค์ประกอบหรือไม่?

Accepted Answer

Border-radius ทำงานกับองค์ประกอบ HTML ส่วนใหญ่รวมถึง div, button, img และ input แต่อาจไม่ตัดเนื้อหาที่ล้นโดยไม่มีการตั้งค่า overflow: hidden

Question 7

สามารถสร้างรูปทรงที่ซับซ้อนด้วย border-radius ได้หรือไม่?

Accepted Answer

ได้ โดยการรวมค่ารัศมีที่แตกต่างกันสำหรับแต่ละมุม คุณสามารถสร้างรูปเม็ดยา วงรี ใบไม้ และรูปทรงอินทรีย์ที่กำหนดเอง

Question 8

border-radius รองรับในทุกเบราว์เซอร์หรือไม่?

Accepted Answer

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

Question 9

สร้างปุ่มรูปเม็ดยาอย่างไร?

Accepted Answer

ตั้งค่า border-radius เป็นค่าที่เท่ากับหรือมากกว่าครึ่งหนึ่งของความสูงขององค์ประกอบ สำหรับปุ่มสูง 40px ใช้ border-radius: 20px หรือสูงกว่า

Question 10

border-radius ส่งผลต่อภาพพื้นหลังหรือไม่?

Accepted Answer

ได้ border-radius ตัดพื้นหลัง ภาพพื้นหลัง และขอบขององค์ประกอบ พื้นหลังจะตามมุมมนโดยอัตโนมัติ

Question 11

สามารถทำให้ border-radius เคลื่อนไหวได้หรือไม่?

Accepted Answer

ได้ border-radius สามารถทำให้เคลื่อนไหวได้ด้วยการเปลี่ยนผ่านและแอนิเมชัน CSS คุณสามารถเปลี่ยนระหว่างค่ารัศมีที่แตกต่างกันอย่างราบรื่น

Question 12

สามารถใช้ border-radius กับ CSS transform ได้หรือไม่?

Accepted Answer

ได้ border-radius ทำงานได้ดีกับ CSS transform เช่น rotate, scale และ translate

Question 13

สร้างวงกลมที่มีขอบอย่างไร?

Accepted Answer

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

Question 14

ความแตกต่างระหว่างคุณสมบัติมุมแต่ละตัวและแบบย่อคืออะไร?

Accepted Answer

คุณสมบัติแต่ละตัวเช่น border-top-left-radius ให้คุณควบคุมแต่ละมุมได้อย่างแม่นยำ แบบย่อให้คุณตั้งค่าหลายมุมในคำประกาศเดียว

ตัวสร้าง Border Radius CSS

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