一、传统的css方法
在目标对象前后分别加三个块对象，每个对象用css绘出圆角的一个效果——共3px高——短连续线、中间留白两边内缩进2px宽为2px的左右边框、中间留白两边内缩进1px宽为1px的左右边框。

 

<div class="rg_1"/><div class="rg_2"/><div class="rg_3"/>
<div class="rg"> 医学视频</div>
<div class="rg_4"/><div class="rg_5"/><div class="rg_1"/>

 

<style type="text/css">

.rg{border-left:1px solid #A5DA94;border-right:1px solid #A5DA94;zoom:1;padding-bottom:1px;background:#DBF1D4}

.rg_1,.rg_2,.rg_3,.rg_4,.rg_5{height:1px;overflow:hidden;font-size:0px;margin:0 1px;border:0px solid #A5DA94;}

.rg_1{background:#A5DA94;margin:0 3px; }

.rg_5,.rg_2{border-left-width: 2px;border-right-width:2px}

.rg_4,.rg_3{border-left-width: 1px;border-right-width:1px}

.rg_4,.rg_5,.rg_2,.rg_3{background:#DBF1D4;}

</style>

 

 

效果如下：

  医学视频

二、最省事的背景图办法
1. 直接使用单张背景图（但目标对象的大小要严格限定）；
2. 添加上级对象，上级对象使用圆角背景图的左侧，目标对象使用圆角背景图的右侧，如下代码使用此方案：

 

<ul class="mainlevel" id="ja-splitmenu">
<li><a href="/pictures"><span>医学图谱大全</span></a></li>
<li><a href="/videos"><span>医学动画和视频</span></a></li>
</ul>
<style type="text/css">
#ja-splitmenu li {
margin: 0;
padding: 0;
display: inline;
}

#ja-splitmenu a {
float: left;
margin: 0 2px;
padding: 0 0 0 4px;
background: url(/templates/web/images/tableft.gif) no-repeat top left;
text-decoration: none;
text-align: center;
}

#ja-splitmenu a span {
float: left;
padding: 7px 15px 6px 11px;
display: block;
background: url(/templates/web/images/tabright.gif) no-repeat top right;
color: #666666;
}
</style>

 

效果如下：

 

三、最省事的JS方案
使用脚本在目标对象前后添加如方案一中所述的可被css修饰的元素。实际上，Jquery中的圆角矩形插件 jQuery Corner和其他类似圆角矩形就是如此实现的。

可以简单到一行代码：$(this).corner();

说到Jquery，这儿有15分钟上手的指南：
http://www.blueidea.com/tech/web/2007/4993.asp

TerryLee在博客上转介了Jquery的240个插件大全：
http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html#Post

……

过程往往人各不同——我们生活在多样化的世界。