日期:2014-05-17 浏览次数:20778 次
圆角的jquery插件,效果很多,网址
http://jquery.malsup.com/corner/
?
还有个手工写的
纯css解决方案的网站地址 http://www.spiffycorners.com/
在如上的页面里面可以选择颜色来生成如下代码:
?
?
<style type="text/css"> .spiffy{display:block} .spiffy *{ display:block; height:1px; overflow:hidden; font-size:.01em; background:#56E69E} .spiffy1{ margin-left:3px; margin-right:3px; padding-left:1px; padding-right:1px; border-left:1px solid #b0eecf; border-right:1px solid #b0eecf; background:#7de9b3} .spiffy2{ margin-left:1px; margin-right:1px; padding-right:1px; padding-left:1px; border-left:1px solid #e5f3ec; border-right:1px solid #e5f3ec; background:#74e8ae} .spiffy3{ margin-left:1px; margin-right:1px; border-left:1px solid #74e8ae; border-right:1px solid #74e8ae;} .spiffy4{ border-left:1px solid #b0eecf; border-right:1px solid #b0eecf} .spiffy5{ border-left:1px solid #7de9b3; border-right:1px solid #7de9b3} .spiffyfg{ background:#56E69E} </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="spiffyfg"> <!-- content goes here --> </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>
?