像素模型实现圆角矩形

80酷酷网    80kuku.com

  圆角 就是利用px单位的块级元素拼合而形成一个视觉上的圆角矩形,因为1px在人的视觉感受中不是很明显,就感觉它是圆滑的圆角矩形了。


图示:


代码:
css:.con{margin: 2% 5%; background: #000; color: #fbca04}
b.rtop,b.rbottom{display: block; background: #333}
b.rtop b,b.rbottom b{display: block; height: 1px; overflow: hidden; background: #000}
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}
xhtml:<div class="con">
  <b class="rtop">
   <b class="r1"></b>
   <b class="r2"></b>
   <b class="r3"></b>
   <b class="r4"></b>
 </b>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <p> </p>
 <b class="rbottom">
 <b class="r4"></b>
 <b class="r3"></b>
 <b class="r2"></b>
 <b class="r1"></b>
 </b>
</div>

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: