img 灰色默认外边框的去除
最近在做一个小游戏时发现了一个问题，总是在弹出img时先出现一个灰色的边框，所以为了查找问题，查找了一些关于img 默认边框的小知识点。
在这里整理了一些知识点：
一. 下面代码都试验过后会发现，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>
为了解决这个问题，整理了几个方法：
1. 设置空img的css样式
img[src=""],img:not([src]){
opacity:;
}
第一个为属性选择器（img中src为空的元素），第二个为反选伪类选择器（src没有的img元素），将其的opacity设置为空
2.img剪裁方法
（1）负margin
.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;
}
-------------------
作者：chancejl
来源：CSDN
原文：https://blog.csdn.net/qq_39833794/article/details/79922355
版权声明：本文为博主文章，转载请附上博文链接！
img 灰色默认外边框的去除的更多相关文章
- 去除input边框 input去除边框 去除input获取焦点时的蓝色外边框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 【SAP BO】处理掉BOE打开Xcelsius报表时，外围出现的外边框(转)
原帖地址:http://blog.csdn.net/liyi199488/article/details/8943286 通过BOE打开Xcelsius报表时,总是出现一个外边框. 处理办法: Xce ...
- border 外边框
语法: border:<line-width> || <line-style> || <color> <line-width> = <length ...
- android 自定义按钮的外边框
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...
- css总结4：input 去掉外边框,placeholder的字体颜色、字号
1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...
- HTML&CSS基础-外边框
HTML&CSS基础-外边框 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML <!DOCTYPE html> <html> <h ...
- HTML 学习笔记 CSS样式（外边框 外边框合并）
CSS外边距 围绕在元素边框的空白区域就是外边距 设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...
- （谷歌浏览器等）解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
- jquery实现无外边框table
jquery实现无外边框table 在需要设为无外边框的table上加上class noOutBorder <tableclass="noOutBorder"> < ...
随机推荐
- 在Django中使用Neo4j
重要的先说在前面吧,最后的选型结构是安装了最新的neo4j版本3.0.3,使用了neo4j-rest-client客户端库.主要原因是更适用于django的neomodel库目前只支持neo4j2.2 ...
- JAVA库函数总结【持续更新】
生成随机数: Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值. Random rand = newRandom(); rand.nextInt( ...
- php 阿里云短信服务及阿里大鱼实现短信验证码的发送
一:使用阿里云的短信服务 ① 申请短信签名 ②申请短信模板 ③创建Access Key,获取AccessKeyId 与 AccessKeySecret.(为了安全起见,这里建议使用子用户的Access ...
- 洛谷 P2725 解题报告
P2725 邮票 Stamps 题目背景 给一组 N 枚邮票的面值集合(如,{1 分,3 分})和一个上限 K -- 表示信封上能够贴 K 张邮票.计算从 1 到 M 的最大连续可贴出的邮资. 题目描 ...
- 用shell处理以下内容 1、按单词出现频率降序排序！ 2、按字母出现频率降序排序！ the squid project provides a number of resources toassist users design,implement and support squid installations. Please browsethe documentation and support
此题目有多种解法,sed.awk.tr等等,都可以解决此题,命令运用灵活多变. 编写shell脚本no_20.sh 解法1: #!/bin/bash ###-------------CopyRight ...
- QT5:C++实现基于multimedia的音乐播放器（一）
上一篇里简略的描述了一下播放器的实现,这一篇开始具体描述一下过程. 环境配置:Qt Creator 打开Qt Creator,创建一个new project,项目名称随你喜欢(我的是MusicPlay ...
- PAT1061:Dating
1061. Dating (20) 时间限制 150 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Sherlock Holme ...
- java并发之TimeUnit理解
TimeUnit是java.util.concurrent包下面的一个类,TimeUnit提供了可读性更好的线程暂停操作,通常用来替换Thread.sleep(),在很长一段时间里Thread的sle ...
- Java NIO SocketChannel套接字通道
原文链接:http://tutorials.jenkov.com/java-nio/socketchannel.html 在Java NIO体系中,SocketChannel是用于TCP网络连接的套接 ...
- 【转】tomcat logs 目录下各日志文件的含义
tomcat每次启动时,自动在logs目录下生产以下日志文件,按照日期自动备份 localhost.2016-07-05.txt //经常用到的文件之一 ,程序异常没有被捕获的时候抛出的地方 ...