web: ลบมุมแบบไม่ต้องใช้ไฟล์ภาพ

Topic: 
 

ทดสอบการลบมุม แบบไม่ต้องใช้ไฟล์ภาพ แต่ใช้ css แทน

เอามาจาก Nifty Corners: rounded corners without images

เนื้อไฟล์ css คือ

<style>
/* NIFTY: FROM http://www.html.it/articoli/nifty/index.html */
.nifty{ margin: 5px; background: #eed;}
b.rtop, b.rbottom{display:block;background: #fff;}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #eeeed4;}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px;}
.nifty .inner {padding: 10px;}
</style>

เนื้อไฟล์ html คือ

<div class="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="inner">
<p>ทดสอบการลบมุม แบบไม่ต้องใช้ไฟล์ภาพ แต่ใช้ css แทน</p>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>