美文网首页
万恶的边框CSS

万恶的边框CSS

作者: 感觉不错哦 | 来源:发表于2018-11-21 15:25 被阅读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一样 不可能精通的 哈哈 没有 开玩笑

    相关文章

      网友评论

          本文标题:万恶的边框CSS

          本文链接:https://www.haomeiwen.com/subject/ukrcqqtx.html