การทำกรอบขอบมนด้วย css มีวิธีทำได้หลายวิธีครับ
border-radius ใน css
CSS มีการเพิ่มการทำขอบกล่องให้โค้งมน ก็คือ border-radius ครับ ซึ่งค่าที่ใส่ก็คือรัศมีของความโค้ง ยิ่งใส่ค่ามากเท่าไหร่ ก็จะทำให้กรอบโค้งมากขึ้น
โดยเราจำเป็นต้องใส่ coding ของ browser นั้นก่อนหน้าคำสั่ง css นี้ด้วยเพื่อให้สามารถแสดงหลได้ถูกต้องใน browser นั้นๆด้วย โดย -webkit- เป็นของ Safari และ -moz- เป็นของ Mozilla Firefox
-moz-border-radius: 5px;
border-radius: 5px;
นอกจากนั้น ยังสามารถกำหนดให้โค้งเฉพาะมุมใดมุมหนึ่งได้ด้วย
สำหรับ -webkit-:
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 20px;
สำหรับ -moz-:
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 20px;
และยังสามารถใช้คู่กับคำสั่ง css ตัวอื่นได้อีกด้วยครับ เช่น
-moz-border-radius: 5px;
border-radius: 5px;
background-color: 000000; width: 200px; height: 200px;
แต่วิธีนี้การแสดงผลจะมีปัญหากับ browser เวอร์ชั่นเก่าๆนะครับ เช่น IE6 Firefox2 เป็นต้นครับ
ใช้กราฟฟิกเข้ามาช่วยในการทำขอบโค้งมน
วิธีนี้จะแสดงผลได้ทุก browser ครับ เพียงแต่มีขอเสียคือ เป็นการจำกัดความกว้างตามขนาดของกราฟฟิกที่ทำมา หากจะปรับความกว้่างต้องไปแก้ที่ตัวกราฟฟิกนั้นโดยตรงครับ
โดยวิธีการทำนั้นจะแยกกราฟฟิกนั้นออกเป็น 3 ส่วน คือ Top Body (สำหรับใส่เนื้อหา) Bottom
.body {background-image: url(images/body); background-repeat: repeat-y; width: xxxpx; height: xxpx;}
.bottom{background-image: url(images/bottom); background-repeat: no-repeat; width: xxxpx; height: xxpx;}
แต่วิธีการนี้จะมีข้อเสียคือ หากเราต้องการเปลี่ยนสีพื้นหลัง หรือ ความกว้าง เราต้องไปแก้ไขที่รูปกราฟฟิกโดยตรงเลยครับ
Twitter
RSS
หาวิธีตั้งนาน ทำได้แล้วค่ะ ขอบคุณสำหรับบทความดีๆ นะคะ