BlogGang.com : : eaknarak

ขอเผยแผ่เป็นธรรมทาน เพื่อการหลุดพ้นจากวัฏสงสารอันหาต้นและปลายไม่ได้

ทำขอบโค้งมนใน CSS3 ตอนที่ 1

ทำขอบโค้งมนใน CSS3 ตอนที่ 1

ทำขอบโค้งมนใน CSS3 ตอนที่ 1

ใน CSS3 มี Border Properties ตัวใหม่เพิ่มเข้ามาครับ คือ border-radius
เจ้าตัวใหม่ที่เพิ่มเข้ามานี้ทำให้การเขียนเว็บที่ต้องทำกรอบ หรือ ขอบมนๆ โค้งๆ
นั้นง่ายขึ้นมากครับ ไม่ต้องตัดแปะภาพมาใช้เหมือนสมัยก่อนแล้ว วิธีใช้งานไม่ยาก
มาดูกัน

เริ่มจากมาดูการใช้งานของ border-radius กันก่อนครับ

Syntax:
border-*-*-radius: [ | <%> ] [ | <%> ]

ตัวอย่าง
border-radius: 5px; //ขอบโค้ง 5 pixel ทั้ง 4 มุม