鼠标经过盒子出现边框（伪元素，定位，css3盒子模型）
<body>
<div>
<img src="mi6.png" >
</div>
</body>
div{
width: 220px;
height: 220px;
position: relative;
}
div:hover::after{
content: "";
display: block;/* 原先是行内元素，必须转换宽高才有效 */
width: 100%;/* 宽高100%，因为伪元素的盒子在div内部，是div的100% */
height: 100%;
box-sizing: border-box;/* css3内减盒子，添加边框盒子宽高不变 */
border: 5px solid rgb(218, 198, 198);
position: absolute;/* 添加的盒子定位到图片上去 */
left:;
top:;
}
鼠标经过盒子出现边框（伪元素，定位，css3盒子模型）的更多相关文章
- 利用伪元素和css3实现鼠标移入下划线向两边展开效果
一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...
- 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果
原帖地址 https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...
- 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- css3 盒模型与 伪元素综合应用案例
先来简略理解下盒模型: 在 css3 之前,盒模型默认为 box-sizing : content-box,这种模式下的盒模型计算大小方式为,width + padding + border : 而 ...
- CSS before和after伪元素
CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...
- 理解伪元素 :Before 和 :After
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...
- css伪元素用法大全
本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...
- 伪元素before after
什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以js无法操作他.那为什么叫他"元素"?因为我们可以对其进行跟元素几乎无差别的操作. 伪元 ...
- CSS中的伪类与伪元素
在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...
- 伪元素 :Before 和 :After的学习
层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...
随机推荐
- C#解压、压缩高级用法
压缩:(可以吧要排除的文件去掉) /// <summary> /// 压缩文件夹 /// </summary> /// <param name="folder& ...
- Asp.netMVC中Ajax.BeginForm上传文件
做一个上传并解压的功能,解压完了回调,解压多少文件.搞了半天用Ajax.BeginForm.各种坑,后来直接放弃 @using (Ajax.BeginForm("UploadFile&quo ...
- 5.安装CentOS后，开机找不到Win10的启动选项解决办法
现象:在Win10下安装了CentOS7双系统,开机后,居然发现找不到Win10启动选项,默认进入了CentOS系统. 解决办法: 方法一:笔者一般是用创建一个Win10启动盘,电脑重启进入启动盘后, ...
- Git使用整理
[本文由水木桶首发于博客园,原文地址:https://www.cnblogs.com/shuimutong/p/11404664.html,未接允许,严禁转载] 背景 很久之前使用的是svn,直接在E ...
- 1+X学习日志——扇形2D效果
section{ width: 500px; height: 300px; border-bottom: 10px solid black; position: relative; margin: 1 ...
- python02---基础数据类型
python02---基础数据类型 一. 什么是数据类型 我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,&quo ...
- 基于NFS的PV动态供给(StorageClass)
一.简介 PersistentVolume(PV)是指由集群管理员配置提供的某存储系统上的段存储空间,它是对底层共享存储的抽象,将共享存储作为种可由用户申请使的资源,实现了“存储消费”机制.通过存储插 ...
- 学习python的日常
今天是开始正式接触python语言的第一天,然后来自前辈的知道开始了在学习过程当中用博客来记录自己的学习历程,以供自己更快地掌握这门编程语言. 大概的总结一下的话,还是按照我的编程的习惯,要学写代码, ...
- ssh本机失败(ssh: connect to host localhost port 22: Connection refused)
ssh本机失败(ssh: connect to host localhost port 22: Connection refused) 一. 问题描述 之前一直在服务上使用宝塔面板, 今天突发奇想, ...
- 关于RGBDSLAMV2学习、安装、调试过程
Step1:https://github.com/felixendres/rgbdslam_v2/wiki/Instructions-for-Compiling-Rgbdslam-(V2)-on-a- ...