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

PHP Result Center PHP Result Center เป็นหมวด ที่ไว้รวบรวม โปรแกรม Code php Javascript CSS CMS

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

รวม 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/
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
sommhai_lek
PHP Newbie
PHP Newbie
โพสต์: 5
ลงทะเบียนเมื่อ: 12/04/2010 10:45 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย sommhai_lek »

ผมใช้ Tool ของเว็บนี้
http://www.spiffycorners.com/
เฉพาะสมาชิกที่ตอบกระทู้คุณภาพ 20 โพสขึ้นไป
thedew
PHP Newbie
PHP Newbie
โพสต์: 3
ลงทะเบียนเมื่อ: 14/04/2010 4:14 pm

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

โพสต์ที่ยังไม่ได้อ่าน โดย thedew »

ถามหน่อยครับ คือ ผมเขียนโดยใช้ form php แล้ว ใส่ ตารางแล้วเป็นแบบนี้
ควรแก้ยังไง ครับ
แนบไฟล์
asd.jpg
asd.jpg (21.27 KiB) Viewed 6024 times
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

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

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

thedew เขียน:ถามหน่อยครับ คือ ผมเขียนโดยใช้ form php แล้ว ใส่ ตารางแล้วเป็นแบบนี้
ควรแก้ยังไง ครับ
มีปัญหาเกี่ยวกับเรื่องอะไรครับ ลองเอาโค้ดมาดูด้วยซิครับ
ปล. ตั้งกระทู้ให้ตรงหมวดด้วยนะครับ
https://www.mindphp.com/forums/viewforum.php?f=22

มีปัญหา php หรือ html,css หรือ ปัญหาอะไร
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 60