Alisoft

3

制作可以自由扩展的圆角矩形

zhuxy 发表于2008-07-17/ 3条评论 »

制作可以自由扩展的圆角矩形

圆角矩形有很多种写法，最常规的是将圆角矩形背景图从上到下（或者从左到友）分别切割成3部分，分别做背景，但这样的缺点是矩形只能向下自由延伸或者向右，不能同时向左向右，另外也可以画线制作圆角矩形，但是圆角锯齿明显。

下面介绍一种新的方法

即把四个圆角图片（仅仅拐角的那一小部分）组合成一个最小的圆角矩形保存，假如命名为 round.gif，假如圆角矩形的边框是黑色(#000000)
XHTML代码如下：
<div class=” rounded”>

<span class=”top_left”></span>
<span class=”top_right”></span>
<span class=”bottom_left”></span>
<span class=”bottom_right”></span>

这里放内容，上面4个span是浮动在四个角的

</div>

CSS样式如下：
.rounded{
position:relative;
border:1px solid #000000;
width:500px;
height:350px;
}
.rounded span{
display:block;
position:absolute;
width:7px;
height:10px;

}
.top_left{
left:-1px;
top:-1px;
background:url(round.gif) top left
}

.top_right{
right:-1px;
top:-1px;
background:url(round.gif) top right;
}
. bottom _ left {
left:-1px;
bottom:-1px;
background:url(round.gif) bottom left;
}

. bottom _ right {
right:-1px;
bottom:-1px;
background:url(round.gif) bottom right;
}

2