用纯CSS样式实现的网页中圆角矩形代码(1)
一般来说,基于CSS技巧">CSS的圆角技术分为带图片和不带图片两大类。在这当中,又有使用JavaScript的和不使用JavaScript的之分。所以也是各有千秋,互有利弊。还有就是,处理出来的圆角有的是有锯齿的,甚至还有人就利用锯齿来做圆角,于是就有人挑战要做成无锯齿的圆角。总之,新技术在不断出现,新战友挑战老战友,仅仅这个CSS圆角技术就够热闹了。
使用图片的圆角一般结构相对简单,而不使用图片的则经常是层层相套的div。在页面使用JavaScript有时候也不是那么讨人喜欢。所以,我希望能找到一个不用图片,不用JavaScript,并且结构简单的方法,如果可能的话,消除锯齿最好(废话!)。
网页特效代码,用纯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"> <!-- 在这里填入文本内容 --> 本站提供网页制作教程,动态网页教程,建站指南,FLASH动画,视频教程,网页特效,网页素材等 </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>