首先，楼上说得很对，你之所以出现图片抖动的原因是因为，border变为2px的时候，整个盒子的width和height都变了，浏览器对整个排版会重新解析，导致这个盒子和出现一些挤压。
细说一下，浏览器对盒模型的解析，会影响盒子的width宽度、height高度的属性有边框(border)、内补丁(padding)、外补丁(margin)。显然一个盒子真实宽度=width+border*2+margin*2；真实高度=height+border*2+margin*2；而padding是只会影响内容的编排，
举例说明，我定义了一个宽度高度都是100px的div，margin，border，padding都是10px；最后在火狐的视图下看和模型，浏览器的解析结果是120px，如图所示：
<div style="width:100pxheight:100pxborder:10pxmargin:10pxpadding:10px"></div>总言之，为了防止你出现图片的抖动，主要就是要达到鼠标放上去之后的盒子的总宽度和总高度是不变的才行：
所以我的意见是：
<style type="text/css">#box{width:100pxheight:100pxborder:1px solid #ccc}
#box:hover{width:98pxheight:98pxborder:2px solid #ccc}
</style>
<div id="box"></div>
你可以试一下，不懂欢迎再和我探讨……
可以通过设置一下边框宽度来解决不能重合的问题。像这样的带边框div的一定要计算很精准：
总宽度＝div宽度+左边框宽度+右边框宽度（只要有边框的div都要计算边框的宽度）
上图中CSS并没有指定边框是多宽的，建议也指定定义好的宽度数值，再计算一下整体宽度是多少，这样应该就可以将边框重合了。
如果还不能重合，建议将完整代码截图发来。
两种效果 一种是把图片做成大的背景但是这样有局限性 因为这样它不会根据页面的变化而变化了
另一种方法是我推荐的方法
把底部圆角那儿切出来叫top.jpg
底部叫foot.jpg
中间的叫bg.jpg
<div style=" background:url(这里是bg.jpg) repeat-y left top">
<div>这里放head.jpg图片</div>
<div>这里就是你想要写的内容随便放什么都可以的</div>
<div>这里放foot.jpg图片</div>
</div>
这样的效果你看下吧 肯定是最简单最方便实现你现在这种效果的
而且会根据内容的大小而变化。
另一种
文本框用input，<input type="text" class="txtnput" value=""/>
.txtnput{float: leftwidth:126pxheight:27pxbackground:url(图片路劲)border:none}
高度和宽度是你效果图中你需要的那种文本框的大小，背景图片也是你需要的那种框。
按钮也是一样的实现。
