img 灰色默认外边框的去除

时间 2019-12-14

标签 img 灰色默认边框去除栏目 HTML 繁體版

原文原文链接

最近在作一个小游戏时发现了一个问题，老是在弹出img时先出现一个灰色的边框，因此为了查找问题，查找了一些关于img 默认边框的小知识点。css

在这里整理了一些知识点：html

一. 下面代码都试验事后会发现，img会有外边框，这个也是使用img元素的一个坑浏览器

通常在img为空时出现，由于浏览器找不到图，就会用一个边框来代替布局

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>img外边框</title>
    </head>
 
    <body>
        <p class="container-img">
            <img class="common-icon login-icon" src="">
        </p>
 
    </body>
    <style type="text/css">
        .container-img {
            display: inline-block;
            width: 36px;
            height: 36px;
            overflow: hidden;
        }
        .common-icon {
            display: inline-block;
            width: 36px;
            height: 36px;
        }
        
    </style>

为了解决这个问题，整理了几个方法：spa

1. 设置空img的css样式.net

img[src=""],img:not([src]){
            opacity:0;
        }

第一个为属性选择器（img中src为空的元素），第二个为反选伪类选择器（src没有的img元素），将其的opacity设置为空code

2.img剪裁方法htm

（1）负marginblog

 .container-img img {
             display: inline-block;
             margin: -1px;
             width: 38px;
             height: 38px;
         }

负的边距像能减少元素在文档流中的尺寸同样，但其实它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减少了，因此位置也就发生变化了。还有，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。因此margin = -1px至关于向左上方移动一个像素，因此margin = -1px至关于向左上方移动一个像素，为了让父级元素能够遮住img的边框，须要将img width/height 均加2px，至关与对图片进行剪裁，定位元素方法与这个原理同样。游戏

负margin的使用场景不少，咱们不少用的三栏布局的圣杯布局，双飞翼布局都是这么使用的。

（2）绝对定位

.container-img{
            position:relative;
       }
.container-img img {
            position: absolute;
            top: -1px;
            right: -1px;
            width: 38px;
            height: 38px;
        }

-------------------