实现圆角的两种方式

第一种:用背景图片利用css-sprites技术把4个小圆角拼合到一张小图里

图片:

css:

代码
.box{border:1px solid #069; position: relative;}
.tl,.tr,.bl,.br
{width:6px; height:6px; display:inline-block; position:absolute; background:url(images/bg_co1.gif);}
.tl
{top:-1px; left:-1px;}
.tr
{top:-1px; right:-1px; background-position:0 -6px;}
.bl
{bottom:-1px; left:-1px; background-position:0 -12px;}
.br
{bottom:-1px; right:-1px; background-position:0 -18px;}

 

Dom:

<div class="box">
<span class="tl"></span><span class="tr"></span>
<div class="main">
  
<p>这里是主要内容</p>
</div>
<span class="bl"></span><span class="br"></span>
</div>

 

第二种:利用纯css实现圆角

css:

代码
.box{
    width
:300px;
}
.box .b1,.box .b2,.box .b3,.box .b4,.box .b5,.box .b6,.box .b7,.box .b8
{
    height
:1px;overflow:hidden; display:block;
}
.box .b1,.box .b8
{
    background
:#dedede;
    margin
:0 5px;
}
.box .b2,.box .b7
{
    background
:#fff;
    margin
:0 3px;
    border-left
:2px solid #dedede;
    border-right
:2px solid #dedede;
}
.box .b3,.box .b6
{
    background
:#fff;
    margin
:0 2px;
    border-left
:1px solid #dedede;
    border-right
:1px solid #dedede;
}
.box .b4,.box .b5
{
    background
:#fff;
    margin
:0 1px;
    border-left
:1px solid #dedede;
    border-right
:1px solid #dedede;
}

.maintxt
{
    border-left
:1px solid #dedede;border-right:1px solid #dedede;background:#fff; height:300px;
}

 

DOM:

代码
<div class="box">
<class="b1"></b><class="b2"></b><class="b3"></b><class="b4"></b>
<div class="maintxt"></div>
<class="b5"></b><class="b6"></b><class="b7"></b><class="b8"></b>
</div>

 

 

 

posted @ 2010-03-12 11:29  lch880  阅读(266)  评论(0编辑  收藏  举报