简单的css效果原理（一）之边框变色

项目中经常会遇到一些重复的问题，搞清原理，随时mark的话，下次再遇到同样的问题就不会那么束手无策了。

今天我想说的是鼠标移动到盒子上，盒子的边框自动变色的问题，如果有间距的话，不能称为一个点，但是没有间距的话，存在-1px的情况下，那么这里就能用到这样一个小技巧了。先看下要实现的效果，如图所示：

我想看到这个图应该就能够臆想出来要实现的效果了。这里最关键的是鼠标移入怎么能让我移入的这个盒子的边框四个边都能看到变色呢。其实很简单，就是让鼠标移入的时候

这个盒子是相对周围的盒子边框变色就可以了，所以点睛之笔只有一点，li:hover{position:relative;border:1px solid #FF7300;}