2008-02-21

才发现的 纯css的圆角DIV解决方案

纯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>
 

 

  • 145976b1-7dc5-3e08-b42a-a3a38948bb33-thumb
  • 描述:
  • 大小: 9.8 KB
评论
jimichan 2008-03-03
不过那个解决方案是要调用js的
bilang 2008-02-21
你可以看下
http://malsup.com/jquery/corner/
发表评论

您还没有登录，请登录后发表评论

jimichan
搜索本博客
我的相册
6c3caa48-8d6c-31c4-b19a-3164052c9d00-thumb
m1.JPG
共 2 张
最近加入圈子
存档
最新评论