CSS3之解决相邻border重合加粗问题
解决这个问题的 方法 是 ：
- 在 该元素 上设置 相关方向 的 margin为-1px
- 如果需要 伪类显示 的话，在 该元素的伪类 中加 相对定位，目的是将 被压住 的 border 显示出来
- 如果 还需要 在 此元素 上加 拥有绝对定位的其它元素，那么在 该元素 上加 相对定位，在 该元素的伪类 上加 z-index 属性
下面两个例子就是利用了这个方法！！！
代码示例1：
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>CSS3之margin负值title><style type="text/css">* {padding: 0;margin: 0;}#box {width: 1300px;margin: 50px auto;}.showdiv {float: left;position: relative;width: 300px;height: 400px;margin: 0 -1px -1px 0;border: 1px solid dimgray;}.showdiv:hover {z-index: 1;border: 1px solid orange;}style>
head>
<body><div id="box"><div class="showdiv">div><div class="showdiv">div><div class="showdiv">div><div class="showdiv">div><div class="showdiv">div><div class="showdiv">div><div class="showdiv">div><div class="showdiv">div>div>
body>
html>
代码示例2：
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>CSS3之margin负值title><style type="text/css">* {padding: 0;margin: 0;}li {list-style: none;}#box {margin: 50px 10px 50px;width: 200px;}#box li a {position: relative;display: block;margin-top: -1px;border: 1px solid rgba(0, 0, 0, .9);color: white;line-height: 50px;letter-spacing: 4px;text-align: center;text-decoration: none;background-color: rgba(0, 0, 0, .8);}#box li a:hover {z-index: 1;transition: 150ms;background-color: dodgerblue;border-color: dodgerblue;box-shadow: 0 0 10px 0 #4fbfff inset;}#box li a:active {transition: 75ms;background-color: #1075ff;border-color: #1075ff;box-shadow: 0 0 10px 0 black inset;}#first {border-top-left-radius: 5px;border-top-right-radius: 5px;}#last {border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}style>
head>
<body><div id="box"><ul><li class="showli"><a id="first" href="#">页面一a>li><li class="showli"><a href="#">页面二a>li><li class="showli"><a href="#">页面三a>li><li class="showli"><a href="#">页面四a>li><li class="showli"><a href="#">页面五a>li><li class="showli"><a href="#">页面六a>li><li class="showli"><a href="#">页面七a>li><li class="showli"><a href="#">页面八a>li><li class="showli"><a href="#">页面九a>li><li class="showli"><a href="#">页面十a>li><li class="showli"><a href="#">页面十一a>li><li class="showli"><a id="last" href="#">页面十二a>li>ul>div>
body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！