用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>
.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特效
星期三, 六月 20th, 2007学习过css与js的，开下眼界吧，保存这个html打开看看。
且再看网友评论：
2006-6-10 22:36:17
盖茨他爹：老夫活了大半辈子，头一次见这么NB的JS特效
——————————————————————————————
2006-6-10 22:39:06
小星：很少见，一般会直接用flash实现，学习了阿
——————————————————————————————
2006-6-11 22:40:05
dreame：开眼界
——————————————————————————————
2006-7-15 11:45:17
zxxlg205：我也算是开眼界了
——————————————————————————————
2006-7-28 16:22:40
hangxj：何止是一个N字了得? 那应该就是太N了~`
——————————————————————————————
2006-8-9 13:21:55
可可℃乐：俺…俺…俺都不说拉 简直不敢相信。终于体会到JS的强大拉
——————————————————————————————
2006-8-29 11:48:56
angeldidi：cool! 不过有没有人可以帮忙解释一下这些代码？
——————————————————————————————
2006-11-3 11:05:45
〖←冷似雪：厉害,I服了YOU
——————————————————————————————
2006-11-5 00:33:45
尤来尤去：不是太牛，是真TMD的牛！！！