圆角的实现（用最简单的方法，我认为是这样）

  <script type=text/javascript> /**/ </script>

 

 

<script language=javascript> </script> <script src="file:///comdeng/brwstat?key1=1&key2=75962afa4628bf1ea9d31123_36bca709897f67216b60fba2_"></script> <script src="file:///C:/Documents%20and%20Settings/Owner/%E6%A1%8C%E9%9D%A2/%E5%9C%86%E8%A7%92_files/brwstat.htm"></script>

<script> if(document.getElementById("m_blog")) { var imgarray = document.getElementById("m_blog").getElementsByTagName('img'); var imgw = document.getElementById("m_blog").offsetWidth; imgw =imgw-40; for(var i=0; i =imgw) imgarray[i].width=imgw; } } // Fix ff bugs var blog_text = document.getElementById('blog_text'); blog_text.innerHTML = blog_text.innerHTML.replace(/href/s*=/s*("|')?(/././//././/)/gi,"href=$1../$2"); </script>

     

  这是我的一位同事总结的，写得很好，在此分享一下

一、一张图片完成圆角矩形的效果

为了避免界面的过于死板，设计人员经常会设计出圆角矩形的板块来

放置内容。对于开发人员来说，这往往又成为一种负担。在用table的

时代，人们往往会把圆角矩形分块切成四块，把表格弄成九宫格，在

四个角上分别塞上四张圆角图片。至于四面的边框，比较理想的做法

则是设置border。

到div的时代，大家会考虑用float的div浮动到四个角上，分别将其背

景图片设置成切下来的四张图片，边框再想另外的办法进行设置。

不过这种方法其实还是换汤不换药，只不过把表格换成div，把img换

成背景图片，其基本的思路还是如下图一样支离破碎。

说它是支离破碎的思想，其实也是在看过百度hi首页对圆角矩形的css

样式设计以后才这么认为的——因为他们的设计才是真正的简单实用

，其模型就是一个边框和一个圆形图片。直角矩形加上矩形，然后在

四个角上放上四个小正方形，背景图通过对background-position的设

置分别显示圆形图片的各个部分，这样就化整为零，实现了圆角矩形

的基本模型了。接下来，将四个小正方形分别往外挪动1px的举例，就

把四个角上原来的边框覆盖掉了。不妨来直接看看百度hi的首页：

图显示的是圆角矩形右上角的一段代码，看右边的css代码可知，这个

div被float:right设置到了右边，然后被

position:relative,right:-1px,top:-1px等样式使其往外边框的顶部

和右边凸出1px的距离，从而将原来在此处的直线边框覆盖住，让其外

表显示为图片上的曲线。而图片显示的位置则被background-

position:right top设置为显示右上角的部分，从而实现将图片化整

为零的效果。举一反三，其他角上的效果也可以通过同样的办法实现

。

在实际应用中，可能一个页面上会存在若干个不同的圆角矩形效果。

有的颜色不一样，有的圆角直径不一样，则可以将css中公用的部分提

取出来，只用额外再加上很少部分的代码就能生成不同效果的圆角矩

形。比如像下面这样的代码：

.rect,.rect2

{width:8px;height:8px;position:relative;overflow:hidden;font

-size:1px;}.rect2{width:10px;height:10px;}.c1{background-

position:left top;top:-1px;left:-1px;float:left;}.c2

{background-position:right top;top:-1px;right:-

1px;float:right;}.c3{background-position:left bottom;bottom:

-1px;left:-1px;float:left;}.c4{background-position:right

bottom;bottom:-1px;right:-1px;float:right;}.cb{background-

image:url(/img/home/circle.gif);}.cb2{background-image:url

(/img/home/circle2.gif);}在使用的时候，c1,c2,c3,c4是公用的部

分，定义了四个角上的样式，rect,rect2定义了四个角的大小，

cb,cb2定义了圆角部分的背景图片，通过对这几个样式的联合使用，

就可以创造两种不同圆角矩形效果了。
比如：
<div style="border:solid 1px #F2F2F2;">
    <div class="rect c1 cb"></div>
    <div class="rect c2 cb"></div>
    圆角矩形1
    <div class="rect c3 cb"></div>
    <div class="rect c4 cb"></div>
</div>

<div style="border:solid 1px #F4F4F4;">
    <div class="rect2 c1 cb2"></div>
    <div class="rect2 c2 cb2"></div>
    圆角矩形2
    <div class="rect2 c3 cb2"></div>
    <div class="rect2 c4 cb2"></div>
</div>

将四个圆角的图片放在一张图片上，就将四次请求减少为一次了。对

于像百度hi这样的高访问量页面来说，这笔帐算得可真是精明。