在网上能看到有一种解决方式，是使用 margin 让一条边的 margin值为负数，从而达到覆盖前一个元素的边，来减少重叠边框加粗的影响，代码如下
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>边框重叠</title><style>ul li {list-style: none;}.demo {width: 310px;height: 300px;margin: auto;padding: 10px;}.demo ul {float: left;position: relative;}.demo li {width: 100px;height: 100px;float: left;border: 1px solid #000;margin: -1px -1px 0 0;box-sizing: border-box;}.demo li:hover {position: relative;border-color: red;z-index: 1;}</style></head><body><div class="demo"><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></body>
</html>然而效果却不尽人意
这里的话我在内部加了一个白色的边框覆盖住其他的边框，才会好一些
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>边框重叠</title><style>ul li {list-style: none;}.demo {width: 310px;height: 300px;margin: auto;padding: 10px;}.demo ul {float: left;position: relative;}.demo li {width: 100px;height: 100px;float: left;border: 1px solid #333;margin: -1px -1px 0 0;box-sizing: border-box;}.demo li:hover {position: relative;border-color: red;z-index: 1;}.span {display: inline-block;width: 100%;height: 100%;border: 1px solid #fff;}.span:hover {border-color: transparent;}</style></head><body><div class="demo"><ul><li><span class="span"></span></li><li><span class="span"></span></li><li><span class="span"></span></li><li><span class="span"></span></li><li><span class="span"></span></li><li><span class="span"></span></li></ul></div></body>
</html>
