เมื่อ border-radias ไม่ทำงานบน mobile

โดยปกติแล้ว การกำหนดขอบโค้งด้วย border-radius สามารถทำงานได้เป็นปกติบน browser ส่วนใหญ่ เช่น
.round {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

คำสั่ง CSS ด้านบนจะเห็นผลลัพท์เป็นวงกลม

แต่คำสั่งนี้มันไม่สามารถทำงานได้บน Opera Mobile ครับ ซึ่งการแก้ไขจริงๆก็ไม่ยาก เนื่องจาก Opera ไม่รองรับค่า border-radius เป็นเปอร์เซ็นต์นั่นเอง ดังนั้นเราก็จะสามารถเขียนใหม่ได้เป็น
.round {
  -webkit-border-radius: 50em;
  -moz-border-radius: 50em;
  border-radius: 50em;
}

สรุปคือ สามารถใช้ px หรือ em ได้เท่านั้นครับ
ผู้เขียน Goragod โพสต์เมื่อ 17 พ.ค. 2556 เปิดดู 1,520 ป้ายกำกับ CSSCSS3

เรื่องที่เกี่ยวข้อง

^