万恶的边框CSS
2018-11-21 本文已影响175人
感觉不错哦
最近深受修改需求的痛苦，尤其是一个CSS效果居然搞忘了，主要还是写的太少，今天为大家减个坑，可能是我太菜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;margin: 0
}
div{
width: 500px;height: 300px;margin: 100px
}
img{
display: block;width: 100%;height: 100%
}
</style>
</head>
<body>
<div>
<img src="http://img5.imgtn.bdimg.com/it/u=3355878287,4138588456&fm=26&gp=0.jpg" alt="">
</div>
</body>
<script>
</script>
</html>
简单写了一个页面，可以直接复制，这时候有个恶心的需求就是我们鼠标放图片上面加个边框
/* img:hover{
border: 2px solid red
} */
div:hover{
border: 2px solid red
}
在CSS 中我们不管是图片加边框还是div加边框，都会更改原始的宽高，导致图片出现偏移，那我们肯定不能让图片动，
img:hover{
border: 2px solid red;margin: -2px
}
在增大边框的同时我们改变图片的位置，这样就不会发生这种事情；不过万恶的UI不会让我们的效果这么简单的
很多时候我们都是要为div添加overflow：hidden 因为他就喜欢给box加个圆角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;margin: 0
}
div{
width: 500px;height: 300px;margin: 100px;overflow: hidden;border-radius: 4px
}
img{
display: block;width: 100%;height: 100%
}
img:hover{
border: 2px solid red;margin: -2px
}
</style>
</head>
<body>
<div>
<img src="http://img5.imgtn.bdimg.com/it/u=3355878287,4138588456&fm=26&gp=0.jpg" alt="">
</div>
</body>
<script>
</script>
</html>
然后我们此时再使用就没效果了，因为边框变大两像素看不到了；这时候可以使用万能属性，box-sizing: border-box；去掉margin：-2px 好么，它又开始动了
其实解决方法有很多，但是突然脑子短路了不晓得咋办了
比较sao的办法就是提前给img加边框
img{
display: block;width: 100%;height: 100%;box-sizing: border-box;border: 2px solid transparent
}
img:hover{
border: 2px solid red;
}
直接给img加个2px的隐形框不就TM完事了吗 你说气不气 但是我就是没想到
还有一种比较麻烦，在div下写个定位div，一样的宽高不就好了吗，bfc怕个毛的覆盖
当然还有高级的写法，今天刚学会
li{margin-right:10px;float:left;cursor:pointer;position:relative;width:100%;height:100%;}
li:before{content:'';width:100%;height:100%;position:absolute;top:0;right:0}
tli:hover:after{ content:""; display:block; width: 100%; height: 100%; border:2px solid #EB3434; box-sizing: border-
box;position:absolute;top:0;right:0}
此处懒的修改 也不难 选择器用的还是比较少
突然发现css跟js一样 不可能精通的 哈哈 没有 开玩笑
