css-边框重叠问题解决

相邻元素都加上边框后，会出现边框加粗的效果，但实际中我们需要边框不加粗的效果，
代码示例1：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {float: left;width: 100px;height: 200px;list-style: none;border: 1px solid pink;}</style>
</head><body><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body></html>

页面效果：

边框重叠加粗解决方法：margin负值

边框值设置的是1px,margin-left: -1，向左移动1px就可以了：

代码示例2：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {float: left;width: 100px;height: 200px;margin-left: -1px;list-style: none;border: 1px solid pink;}</style>
</head><body><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body></html>

页面效果：

鼠标悬浮边框变色效果不全问题

最后一个盒子显示正常，边框都变色了：

但是其他盒子右边框颜色没看到变化：

原因：右边的盒子边框压住了左边相邻的盒子的边框

解决方法一：添加position: relative;

如果盒子都没有加定位，可以鼠标悬浮时，给盒子加上相对定位relative属性，因为相对定位的盒子会压住普通盒子，位置没有设置偏移量的话就不会动

代码示例3：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {float: left;width: 100px;height: 200px;margin-left: -1px;list-style: none;border: 1px solid pink;}li:hover {position: relative;border-color: darkgreen;}</style>
</head><body><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body></html>

解决方法二：添加z-index: 1;

如果盒子都加上了相对定位，可以设置鼠标悬浮时的盒子层叠性更高，没有设置z-index时，默认是z-index：0

代码示例4:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>li {position: relative;float: left;width: 100px;height: 200px;margin-left: -1px;list-style: none;border: 1px solid pink;}li:hover {z-index: 1;border-color: darkgreen;}</style>
</head><body><ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
</body></html>

页面效果：

css-边框重叠问题解决相关推荐

vue中使用html2canvas方法，设置背景，字体重叠问题解决方法
1.安装 npm install html2canvas --save 2.引入 import html2canvas from 'html2canvas' 3.在组件中使用的方法 createImg ...
html border线条重叠,关于border边框重叠颜色设置问题
盒子模型包括:margin border padding content 在标准盒子模型中 conten不包括border和padding 就是他自身内容所包含的区域. 在IE盒子模型中 co ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
css 高度塌陷_css高度塌陷问题如何解决 css高度塌陷问题解决方法
本篇文章小编给大家分享一下css高度塌陷问题解决方法,文中通过示例代码详细的介绍了解决方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来一聚教程看看. 1. 高度塌陷在文档流中 ...
vue html2canvas文字重叠,vue中使用html2canvas方法，设置背景，字体重叠问题解决方法...
1.安装 npm install html2canvas --save 2.引入 import html2canvas from 'html2canvas' 3.在组件中使用的方法 createImg ...
W3school：CSS基础：CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...
22.CSS边框与背景【上】
第十七章 CSS边框与背景[上] 一.声明边框属性值说明 CSS版本 1.border-width ...
html边框绕着图片,CSS 边框
CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素. 元素外边距内就是元素的的边框 (border) ...
html中右侧三角形代码,html – 使用CSS边框的三角形和倒三角形
我试图使用CSS边框实现以下图像示例.这可能吗?此外,它是否也可以响应?我开始了一个小提琴 here.我知道我已经在某个地方见过,但不记得在哪里. 这是我到目前为止 – HTML SIGN UP to ...
R语言ggplot2可视化轴标签重叠问题解决实战：修改轴标签字体、轴标签垂直于坐标轴（或者旋转特定角度）
R语言ggplot2可视化轴标签重叠问题解决实战:修改轴标签字体.轴标签垂直于坐标轴(或者旋转特定角度) 目录

css-边框重叠问题解决

边框重叠加粗解决方法：margin负值

鼠标悬浮边框变色效果不全问题

原因：右边的盒子边框压住了左边相邻的盒子的边框

解决方法一：添加position: relative;

解决方法二：添加z-index: 1;

css-边框重叠问题解决相关推荐

最新文章

热门文章