边框值设置的是1px，margin-left：-1，向左移动1px就可以了。
如果盒子都没有加定位，可以鼠标悬浮时，给盒子加上相对定位relative属性。因为相对定位的盒子会压住普通盒子，位置没有设置偏移量的话就不会动。
用定位做，<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.box{position:relative}
.left{position:absolutetop:0left:0}
.center{position:absolutetop:0left:}
.right{position:absolutetop:0left:0}
中间填写你第一块的宽
或者你用浮动做：
把原图放在一个<div>里，然后在这个<div>里插入一个空<span>标签，然后在css样式里，给这个span加上背景图，这个背景图就是指原图的装饰。
CSS样式如下：注意在div(本例中class命名为grd )的样式里position被设成relative(相对)而在span里position被设成absolute(绝对)；这个非常重要！而其它样式比如：width(宽度)，top(上间距) 都可以根据实际情况来定。
<style type="text/css">.grd { border:1px solid #CECECEpadding:50pxheight:50pxwidth:147pxposition:relative} .grd span{ background: url(/images/hot.gif) no-repeatdisplay: blockposition: absolutewidth: 35pxheight: 58pxtop: 5pxleft:140pxborder: 0px} </style>
有了上面的CSS，HTML可以这样写：
<div class="grd"><span></span><img src="/images/61dh.png" border="0"/></div>
设置父结点的position为relative，子结点为absolute。然后通过子节点的top和left属性设置子节点相对于父节点的位置，例如top为40px，就是说子节点从距离父节点顶部40px的位置放置，left属性类似。默认情况下，后面的结点覆盖前面的结点。不过可以通过z-index设置哪个结点在上，z-index值较大的在上，小的在下。 图片重叠 div{ width:300px height:300px border:3px solid pink position:relative } img{ position:absolute width:150px height:150px padding:0 margin:0 } #img1{ top:50px left:40px } #img2{ top:100px left:100px }" />
"/>
