web: ลบมุมแบบไม่ต้องใช้ไฟล์ภาพ
Submitted by wd on Sun, 2007-03-18 20:01
ทดสอบการลบมุม แบบไม่ต้องใช้ไฟล์ภาพ แต่ใช้ 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>
Recent comments