รวม Css ทำขอบโค้ง

mindphp · **เมื่อ:** 07/03/2010 4:16 am

รวม Css ทำขอบโค้ง
ตัวอย่างง่าย

โค้ด:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
   <title>
   Rounded Box Demo
   </title>   
<style type="text/css">

body {
   background-color: #FFF;
   margin: 0px;
   padding: 0px;
   font-size: 16px;
   font-family: Georgia;
}

div.rounded-box {
    position:relative;
    width: 9em;
    background-color: #E6E6E6;
    margin: 3px;
}

/*********************
GLOBAL ATTRIBUTES
*********************/
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:#FFF; overflow:hidden;}

div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#E6E6E6; line-height: 40px;}

/*********************
SPECIFIC ATTRIBUTES
*********************/

div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}

div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}

div.box-contents {
   position: relative; padding: 8px; color:#000;
}

</style>
</head>
<body>

<div class="rounded-box">
    <div class="top-left-corner"><div class="top-left-inside">&bull;</div></div>
    <div class="bottom-left-corner"><div class="bottom-left-inside">&bull;</div></div>

    <div class="top-right-corner"><div class="top-right-inside">&bull;</div></div>
    <div class="bottom-right-corner"><div class="bottom-right-inside">&bull;</div></div>
    <div class="box-contents">
        Contents go here, but it must be at least two lines to look any good.

    </div> <!-- end div.box-contents --> 
</div> <!-- end div.rounded-box -->
</body>
</html>

ดูต่อที่นี่ ยังมีอีกหลากหลายรูปแบบครับ
http://www.devwebpro.com/25-rounded-cor ... -with-css/

sommhai_lek · **เมื่อ:** 12/04/2010 11:02 am

ผมใช้ Tool ของเว็บนี้
http://www.spiffycorners.com/

thedew · **เมื่อ:** 23/04/2010 4:05 pm

ถามหน่อยครับ คือ ผมเขียนโดยใช้ form php แล้ว ใส่ ตารางแล้วเป็นแบบนี้
ควรแก้ยังไง ครับ

mindphp · **เมื่อ:** 23/04/2010 5:08 pm

thedew เขียน:

ถามหน่อยครับ คือ ผมเขียนโดยใช้ form php แล้ว ใส่ ตารางแล้วเป็นแบบนี้
ควรแก้ยังไง ครับ

มีปัญหาเกี่ยวกับเรื่องอะไรครับ ลองเอาโค้ดมาดูด้วยซิครับ
ปล. ตั้งกระทู้ให้ตรงหมวดด้วยนะครับ
viewforum.php?f=22

มีปัญหา php หรือ html,css หรือ ปัญหาอะไร

	ตอบกลับ	แสดง	โพสต์ล่าสุด
เรื่องการ รวมตาราง cell ของ excel โดย php (merg) โดย watchapol » 05/06/2010 3:03 am	2 ตอบกลับ	283 แสดง	โพสต์ล่าสุด โดย watchapol 06/06/2010 9:41 pm Programming - PHP
รวมรายชื่อโปรแกรม FTP โดย mindphp » 22/05/2010 5:41 am	0 ตอบกลับ	420 แสดง	โพสต์ล่าสุด โดย mindphp 22/05/2010 5:41 am โหลดโปรแกรม
รวม Css ทำขอบโค้ง โดย mindphp » 07/03/2010 4:16 am	3 ตอบกลับ	1021 แสดง	โพสต์ล่าสุด โดย mindphp 23/04/2010 5:08 pm PHP Code
แหล่ง รวม RSS ของไทย โดย mindphp » 09/02/2010 9:56 pm	0 ตอบกลับ	569 แสดง	โพสต์ล่าสุด โดย mindphp 09/02/2010 9:56 pm โหลดโปรแกรม
สอบถามหน่อยค่ะ ถ้าจะบวกผลรวมราคาที่มีสินค้ามากกว่าหนึ่งรายการทำไงหรือคะ โดย vahaha » 07/02/2010 5:54 pm	1 ตอบกลับ	273 แสดง	โพสต์ล่าสุด โดย createninku 08/02/2010 7:28 am Programming - PHP

PHP Mindphp.com

รวม Css ทำขอบโค้ง

ผู้ใช้งานขณะนี้