การทำกรอบมน ด้วย CSS

วันนี้นะครับผม pureexe จะนำเสนอวิธีทำกรอบมน เหมือนที่เห็นใน http://www.linedroid.com นะครับ
โดย ลักษณะกรอบมน จะเป็นอย่างนี้

It is a text

วิธีทำ นะครับ คือใช้ การจัด div แล้วใช้ CSS เข้าช่วย

อ่านก่อนสักนิด
1.การแสดงผลจะแสดงได้เมื่อเข้าผ่าน IE 10 +,Firefox 4.0+หรือGoogle chrome
2.ใน style การอ้างอิง หากเป็น id เราจะใช้ดครื่องหมาย "#" หากใช้ class จะใช้เครื่องหมาย "."
วิธีทำ

1. พิมพ์ <div id="bordder">It is text</div>
จะได้ดังนี้

It is a text

2. ก่อนถึง div ให้เติม
<style>
#bordder{

        padding: 15px;
background-color:#F9F;
border-radius: 25px;
margin-bottom:10px;

}
</style>
จะได้เช่นนี้

It is a text

อธิบาย
padding คือการเว้นระยะจาก div ทั้ง4ทิศ
background-color คือสีพื้นหลังdiv
border-radius คือการทำขอบมน ยิ่งเลขมากยิ่งมนมาก
margin-buttom คือเว้นระยะส่วนท้าย

เพื่อความสวยงามเราจะเติมกรอบอีกชั้นโดยคำสั่งทั้งหมดจะเป็นเช่นนี้

<style>
#bordder{
padding: 15px;
background-color:#F9F;
border-radius: 25px;
margin-bottom:10px;
}
#msg{
background-color:#FFC;
border-radius:10px;
padding: 15px;

}
</style>
<div id='bordder'><div id='msg'>It is a text</div></div>

จะได้รูปตามนี้

It is a text

นี่หล่ะคือกรอบตาแบบฉบับ http://www.linedroid.com