css3 border-radius(สั้นๆ)

ใน CSS เมื่อ: by epd 2 ความเห็น
border-radius

สั้นๆครับ border-radius จะเป็นตัวที่ให้กล่องของเราขอบมน(ปกติขอบเหลี่ยม) ซึ่งตอนนี้ Browser ต่างๆ(ไม่นับ IE)ได้รองรับหมดแล้ว(แต่ยังต้องใส่ -prefix- ไว้ข้างหน้า)

Border-radius

ปกติทั่วไปเราจะทำให้ขอบมน ถ้าไม่ใช้ border-radius ช่วยก็ต้องทำ div ครอบไว้ 2 – 18ชั้น(เว้อร์ – -*) แต่ทีนี้ border-radius ได้เข้าถึง ความเจริญก็มาเยือน (ถ้าไม่มี IE อยู่จะเจริญกว่านี้ -*-)
เข้าเรื่องๆ border-radius จะเป็นตัวทำให้ขอบมน (เอ๊ะมนยังไง มนก็คือ ไม่เหลี่ยม -*-) นึกไม่ออกเข้า photoshop แล้ววาด shape สี่เหลี่ยมสักรูป กด เลือก selection เมนู(select -> modify -> smooth) set 5 pixel ก็เหมือนกับ border-radius:5px; ยังไงยังงั้น

ทีนี้ ที่ว่า prefix คืออะไร ก็คือตัวที่ใส่ไว้ข้างหน้า property เพื่อระบุว่าเฉพาะ browser ค่ายๆนั้นๆ (ซึ่งส่วนใหญ่จะทำออกมาไว้เพื่อบอกว่า “ตรูทำได้แล้วเว่ย ค่ายอื่นๆรีบตามมานะ” จะได้เอา prefix ออก)
ใน border-radius นี้ตอนนี้ support หมดแล้วทั้ง Firefox,opera,Webkit(Chrome,Safari)
-prefix-

  • -moz-: ใช้กับ ตระกูล mozzilla หรือว่า Firefox นั่นเอง
  • -webkit- : ใช้กับเครื่องของ webkit (Chrome,Chromium,safari รวมไปถึง Adobe air App ด้วย)
  • -o- : Opera

สำหรับ IE ยังด้อยพัตนาอยู่ จึงทำให้ ต้องใส่ prefix
เอาไปใช้จริงต้องใส่ prefix ไปทุกตัวนะครับ ไม่งั้นจะใช้ได้เฉพาะตัวที่ใส่ prefix ไป

#wrapper{
   width:200px;
  height:200px;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   -o-border-radius:5px;
}

ประมาณนี้ครับ
ส่วน value ต่างๆใช้ได้เหมือนปกติทั่วไป ตามสูตร 1 2 3 4 นะครับ :P