本文摘自 勾三股四 更早时期的 不老歌 博客。

li {
    background: #999;
    border: 1px #333 solid;
    padding: 0.5em;
    -*-box-sizing: border-box;
}
li:hover {
    background: #ccc;
    border-width: 3px;
}
li.classA {
    background-image: url(images/classA-bg.png);
}

一切正常，跟预想的效果是一样的
后来我注意到一个细节，当:hover之后边框变粗了，背景图片也相应的向右下方错位了2个像素。为了不想让背景图片错位，我想到了一个办法：就是利用CSS3中的background-origin属性对背景图片的起始坐标改为边框外顶点，这样边框的宽度就不会对背景图片的位置构成影响了。
于是代码变成了这个样子：

li {
    background: #999;
    border: 1px #333 solid;
    padding: 0.5em;
    -*-box-sizing: border-box;
    -*-background-origin: border-box;
}

但是发现这一改动没有“生效”，背景图片依然会错位。
经过简单的调试，我很快发现了自己的低级失误，就是在设置:hover的背景颜色样式时，没有使用background-color而是background这个缩写：

li:hover {
    background: #ccc;
    border-width: 3px;
}