css-边框重叠问题解决
生活随笔
收集整理的這篇文章主要介紹了
css-边框重叠问题解决
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
相鄰元素都加上邊框后，會出現(xiàn)邊框加粗的效果，但實際中我們需要邊框不加粗的效果，
代碼示例1：
頁面效果：
邊框重疊加粗解決方法：margin負值
邊框值設(shè)置的是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屬性，因為相對定位的盒子會壓住普通盒子，位置沒有設(shè)置偏移量的話就不會動
代碼示例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;
如果盒子都加上了相對定位，可以設(shè)置鼠標懸浮時的盒子層疊性更高，沒有設(shè)置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>頁面效果：
總結(jié)
以上是生活随笔為你收集整理的css-边框重叠问题解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小兔子的数据分析瞎扯（不是自己写的）
- 下一篇： echarts 多组图例重叠问题