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

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

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

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

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

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



border-top-left-radius: 10px; //ขอบโค้งมุมด้านซ้านส่วนบน 10 pixel



border-radius 100px; //ขอบโค้งเป็นวงกลมซะเลย




 

Create Date : 27 ตุลาคม 2555   
Last Update : 27 ตุลาคม 2555 15:41:00 น.   
Counter : 1643 Pageviews.  
space
space

eaknarak
Location :
กรุงเทพ Thailand

[Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 1 คน [?]








space
space
space
space
[Add eaknarak's blog to your web]
space
space
space
space
space