รัศมีขอบเป็นเปอร์เซ็นต์ (%) และพิกเซล (px) หรือ em

ถ้าฉันใช้ค่าพิกเซลหรือ emสำหรับ border-radius รัศมีขอบจะเป็นส่วนโค้งวงกลมหรือรูปเม็ดยาเสมอแม้ว่าค่าจะมากกว่าด้านที่ใหญ่ที่สุดขององค์ประกอบก็ตาม

เมื่อฉันใช้เปอร์เซ็นต์รัศมีขอบจะเป็นรูปไข่และเริ่มต้นที่ตรงกลางของแต่ละด้านขององค์ประกอบทำให้เป็นรูปวงรีหรือวงรี :

ค่าพิกเซลสำหรับรัศมีขอบ:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

ค่าเปอร์เซ็นต์สำหรับรัศมีขอบ:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

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

เส้นขอบรัศมี:

ขั้นแรกคุณต้องเข้าใจว่าคุณสมบัติ border-radius รับ 2 ค่า ค่าเหล่านี้คือรัศมีบนแกน X / Y ของวงรีหนึ่งในสี่ที่กำหนดรูปร่างของมุม
หากมีการตั้งค่าเพียงค่าเดียวค่าที่สองจะเท่ากับค่าแรก ดังนั้นจะเทียบเท่ากับ border-radius: xborder-radius:x/x;

ค่าเปอร์เซ็นต์

การอ้างถึงข้อกำหนด W3C: พื้นหลัง CSS และคุณสมบัติขอบเขตขอบของโมดูลระดับ 3นี่คือสิ่งที่เราสามารถอ่านเกี่ยวกับค่าเปอร์เซ็นต์:

เปอร์เซ็นต์: อ้างถึงมิติที่สอดคล้องกันของกล่องเส้นขอบ

ดังนั้นborder-radius:50%;กำหนด raddi ของวงรีด้วยวิธีนี้:

• รัศมีบนแกน Xเท่ากับ 50% ของคอนเทนเนอร์ความกว้าง
• รัศมีบนแกน Yคือ 50% ของความสูงของคอนเทนเนอร์

พิกเซลและหน่วยอื่น ๆ

การใช้ค่าหนึ่งค่าอื่นที่ไม่ใช่เปอร์เซ็นต์สำหรับรัศมีขอบ (em, in, หน่วยที่เกี่ยวข้องกับวิวพอร์ต, cm ... ) จะทำให้ได้วงรีที่มีรัศมี X / Y เท่ากันเสมอ กล่าวอีกนัยหนึ่งคือวงกลมเป็นวงกลม

เมื่อคุณตั้งค่าborder-radius:999px;รัศมีของวงกลมควรเป็น 999px แต่จะใช้กฎอีกข้อหนึ่งเมื่อเส้นโค้งที่เหลื่อมกันลดรัศมีของวงกลมเหลือครึ่งหนึ่งของขนาดด้านที่เล็กที่สุด ดังนั้นในตัวอย่างของคุณจะเท่ากับครึ่งหนึ่งของความสูงขององค์ประกอบ: 50px

สำหรับตัวอย่างนี้ (ที่มีองค์ประกอบขนาดคงที่) คุณจะได้ผลลัพธ์เดียวกันโดยมีทั้ง px และเปอร์เซ็นต์ ในฐานะที่เป็นองค์ประกอบคือ230px x 100px, border-radius: 50%;เทียบเท่ากับborder-radius:115px/50px;(50% ของทั้งสองฝ่าย):

div {
  display: inline-block;
  background: teal;
  width: 230px;
  height: 100px;
  padding: 40px 10px;
  box-sizing: border-box;
  font-family: courier;
  font-size: 0.8em;
  color: #fff;
}
.percent {
  border-radius: 50%;
}
.pixels {
  border-radius: 115px/50px;
}

<div class="percent">border-radius:50%;</div>
<div class="pixels">border-radius:115px/50px;</div>

เพียงแค่หารค่าแรกด้วย% ที่คุณต้องการ .. ดังนั้นหากคุณต้องการรัศมีขอบ 50% ให้เขียน:

border-radius: 25%/50%; 

หรือตัวอย่างอื่น:

border-radius: 15%/30%;

คุณสามารถทำคณิตศาสตร์ใน js หรือ SASS ได้อย่างง่ายดาย