用css制作不带图片的圆角边框（纯css平滑圆角边框） at "刘华栋"的个人网站

用css制作不带图片的圆角边框（纯css平滑圆角边框）

八月 31st, 2007

正所谓挑战极限运动的人总会想方设法的制造一些挑战并最终成功挑战之。这就是典型一例。圆角边框最初table实现->css+pic实现->利用锯齿实现圆角边框->纯css无锯齿实现，我们不得不感叹人类思维的伟大。IE和firefox2下正常。代码如下：

下载: div.css

<style type="text/css">
   .spiffy{
   display:block;
   }
   .spiffy *{
   display:block;
   height:1px;
   overflow:hidden;
   background:#0a67e6;
   }
   .spiffy1{
   border-right:1px solid #95bdf4;
   padding-right:1px;
   margin-right:3px;
   border-left:1px solid #95bdf4;
   padding-left:1px;
   margin-left:3px;
   background:#478dec;
   }
   .spiffy2{
   border-right:1px solid #e6effc;
   border-left:1px solid #e6effc;
   padding:0px 1px;
   background:#3883ea;
   margin:0px 1px;
   }
   .spiffy3{
   border-right:1px solid #3883ea;
   border-left:1px solid #3883ea;
   margin:0px 1px;
   }
   .spiffy4{
   border-right:1px solid #95bdf4;
   border-left:1px solid #95bdf4;
   }
   .spiffy5{
   border-right:1px solid #478dec;
   border-left:1px solid #478dec;
   }
   .spiffy_content{
   padding:0px 5px;
   background:#0a67e6;
   }
</style>
<div>
   <b class="spiffy">
   <b class="spiffy1"><b></b></b>
   <b class="spiffy2"><b></b></b>
   <b class="spiffy3"></b>
   <b class="spiffy4"></b>
   <b class="spiffy5"></b>
   </b>
   <div class="spiffy_content">
   
   </div>
   <b class="spiffy">
   <b class="spiffy5"></b>
   <b class="spiffy4"></b>
   <b class="spiffy3"></b>
   <b class="spiffy2"><b></b></b>
   <b class="spiffy1"><b></b></b>
   </b>
</div>

CSS

to “用css制作不带图片的圆角边框（纯css平滑圆角边框）”

给我回复