CSS3之解决相邻border重合加粗问题

解决这个问题的方法是：

在 该元素 上设置 相关方向 的 margin为-1px

如果需要 伪类显示 的话，在 该元素的伪类 中加 相对定位，目的是将 被压住 的 border 显示出来

如果 还需要 在 此元素 上加 拥有绝对定位的其它元素，那么在 该元素 上加 相对定位，在 该元素的伪类 上加 z-index 属性

下面两个例子就是利用了这个方法！！！

代码示例1：

<!DOCTYPE html>
<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：

<!DOCTYPE html>
<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>

CSS3之解决相邻border重合加粗问题相关推荐

解决LaTeX英文字体加粗失效、无法加粗问题
文章目录一.前言二.具体问题三.解决办法四.使用效果一.前言最近使用 LaTeX 作为模板写实验报告.论文时,在自己写的 cls 文件里定义好了各种字体及格式,但是在使用过程中却出现了部分 ...
解决小程序字体加粗在开发工具中起作用，但是发布或者体验确不行
数字值 400 相当于关键字 normal,700 等价于 bold.每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗. 可能的值但是在实际使用小程序时,虽然 ...
css div里引用em字体会变斜体_CSS文字加粗斜体[解决代码]
CSS如何给文字加粗,这是小白常见的问题,今天俺跟大家总结分享. 标签解决办法一般老的浏览器可能会使用类似或来加粗文字用来设置斜体,例如以下代码: 加粗字体加粗字体斜体但是此办法语义化不是很好 ...
border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题
border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题参考文章: (1)border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题 (2)http ...
解决Chrome打印宋体不支持加粗效果
解决Chrome打印宋体不支持加粗效果在emr病历打印中(病历页面设置默认字体为宋体),使用window.print()进行前端网页打印,会发现Chrome的网页打印预览中是不支持字体加粗效果的,虽 ...
解决chrome浏览器在进行打印时字体无法加粗
chrom浏览器在进行调用打印的时候,宋体是无法进行加粗效果的,即使添加了font-weight,也是无效的.只能在页面看到,无法在打印预览看到的,目前有两种解决的方式第一种:字体改为华宋体,不要将 ...
LaTeX表格字体加粗（解决文本变宽问题）
latex中对文本加粗常用的方法是 \textbf{*} 在表格中,这个命令也同样生效.但它会使文本变宽,如尝试的方法网上找了很多办法,想改变表格加粗的宽度,常见是是调整LaTeX字体,如下 Co ...
latex加粗斜体无效的解决方法
latex无法使用加粗和斜体,加粗斜体无效解决方法工具栏–选项–设置TexSudio 在<构建>中,更改<默认编辑器>为pdflatex即可结果如下
Android字体加粗，UI小姐姐说太粗了，解决办法
最近开发Android App,UI小姐姐验收的时候说,嗯,你这个字体没加粗呀我说,好的,textStype="bold",然后屁颠屁颠的跑去给UI小姐姐看结果UI小姐姐说,这 ...

CSS3之解决相邻border重合加粗问题

CSS3之解决相邻border重合加粗问题相关推荐

最新文章

热门文章