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

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

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

一般在img为空时出现，因为浏览器找不到图，就会用一个边框来代替

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>img外边框</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <p class="container-img">
  11.             <img class="common-icon login-icon" src="">
  12.         </p>
  13.  
  14.     </body>
  15.     <style type="text/css">
  16.         .container-img {
  17.             display: inline-block;
  18.             width: 36px;
  19.             height: 36px;
  20.             overflow: hidden;
  21.         }
  22.         .common-icon {
  23.             display: inline-block;
  24.             width: 36px;
  25.             height: 36px;
  26.         }
  27.  
  28.     </style>

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

1. 设置空img的css样式

  1. img[src=""],img:not([src]){
  2.             opacity:;
  3.         }

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

2.img剪裁方法

（1）负margin

  1.  .container-img img {
  2.              display: inline-block;
  3.              margin: -1px;
  4.              width: 38px;
  5.              height: 38px;
  6.          }

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

负margin的使用场景很多，我们很多用的三栏布局的圣杯布局，双飞翼布局都是这么使用的。

（2）绝对定位

  1. .container-img{
  2.             position:relative;
  3.        }
  4. .container-img img {
  5.             position: absolute;
  6.             top: -1px;
  7.             right: -1px;
  8.             width: 38px;
  9.             height: 38px;
  10.         }

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

作者：chancejl
来源：CSDN
原文：https://blog.csdn.net/qq_39833794/article/details/79922355
版权声明：本文为博主文章，转载请附上博文链接！

img 灰色默认外边框的去除的更多相关文章

  1. 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 【SAP BO】处理掉BOE打开Xcelsius报表时，外围出现的外边框(转)

    原帖地址:http://blog.csdn.net/liyi199488/article/details/8943286 通过BOE打开Xcelsius报表时,总是出现一个外边框. 处理办法: Xce ...

  3. border 外边框

    语法: border:<line-width> || <line-style> || <color> <line-width> = <length ...

  4. android 自定义按钮的外边框

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  5. css总结4：input 去掉外边框,placeholder的字体颜色、字号

    1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...

  6. HTML&CSS基础-外边框

    HTML&CSS基础-外边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML <!DOCTYPE html> <html> <h ...

  7. HTML 学习笔记 CSS样式（外边框 外边框合并）

    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...

  8. （谷歌浏览器等）解决css中点击input输入框时出现外边框方法【outline:medium;】

    问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:

  9. jquery实现无外边框table

    jquery实现无外边框table 在需要设为无外边框的table上加上class noOutBorder <tableclass="noOutBorder"> < ...

随机推荐

  1. Android版本分布数据源

    先来Android官方数据地址:http://developer.android.com/intl/zh-cn/about/dashboards/index.html 友盟指数,这个对国内开发者比较有 ...

  2. ThinkPHP5从零基础搭建CMS系统（一）

    了解学习thinkphp5应该是2016年年底的事情,当时还没有接触过thinkphp3版本,觉得通过手册直接上手学习tp5蛮轻松的,现在从零记录下,搭建可扩展的CMS. 1.ThinkPHP环境搭建 ...

  3. day11_jsp/EL/JSTL学习笔记

    一.jsp概述 JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP实际上就是Servlet. JSP这门技术的最大 ...

  4. gradle 将依赖打入Jar包的方法

    使用的是IDEA,直接引入 plugins { id 'com.github.johnrengelman.shadow' version '1.2.3' } 放在build.gradle的最上面,然后 ...

  5. 使用float属性的一些小技巧

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAACJCAIAAACHJsJCAAAKUUlEQVR4nO2dTY8cxRnHd73LLsusDd ...

  6. win10汇编环境的搭建

    第一步:下载DOSBox0.74-win32-installer 可以去官网:http://www.dosbox.com/ 或者链接:https://pan.baidu.com/s/1UA77qTLO ...

  7. 由ping所引发的思考~

    今天看了掘金一片关于ping原理的文章,https://juejin.im/entry/5af8d5e651882565bd25581c?utm_source=gold_browser_extensi ...

  8. DX11 Without DirectX SDK--使用Windows SDK来进行开发

    在看龙书(Introduction to 3D Game Programming with Directx 11)的时候,里面所使用的开发工具包为Microsoft DirectX SDK(June ...

  9. Maven安装和使用

    一.安   装 1.解压好后,添加系统环境变量 变量名:MAVEN_HOME 属性值:D:\apache-maven-3.3.3  //也就是解压的路径 path中添加:%MAVEN_HOME%\bi ...

  10. PAT1017:Queueing at Bank

    1017. Queueing at Bank (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Supp ...