สร้าง box แบบสวยงาม ด้วย CSS

CSS Code

<style type="text/css">
.teaser {
	width:430px;
	padding:0 0 14px 0;
	margin:10px auto;
	background:url(images/tsr-b.gif) bottom left no-repeat;
	font-size:12px;
}
.teaser h3 {
	margin:0;
	padding:7px 10px 3px 10px;
	background:url(images/tsr-t.gif) top left no-repeat;
}
.teaser p, .teaser a.more {
	margin:0;
	padding:0 10px 3px;
	border:1px solid #d8d8d8;
	border-width:0 1px;
}
.teaser a.more {
	display:block;
	text-align:right;
	background:url(images/tsr-a.gif) 410px 50% no-repeat;
	padding:0 24px 0 0;
	text-decoration:none;
	color:#44a;
}
.teaser a.more:hover {
	text-decoration:underline;
}
</style> 

HTML Code

<div class="teaser">
	<h3>หัวข้อที่ต้องการแสดง</h3> 
	<p>รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง <br />
รายละเอียดที่ต้องการแสดง รายละเอียดที่ต้องการแสดง <br />
รายละเอียดที่ต้องการแสดง  รายละเอียดที่ต้องการแสดง <br />
รายละเอียดที่ต้องการแสดง  รายละเอียดที่ต้องการแสดง <br />
</p>
	<a href="#" class="more">รายละเอียดเพิ่มเติม</a>
</div>

ตัวอย่างผลลัพธ์

ดาวน์โหลดรูป