<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盒子模型）的更多相关文章

  1. 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...

  2. 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果

    原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...

  3. 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式

    边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...

  4. css3 盒模型与 伪元素综合应用案例

    先来简略理解下盒模型: 在 css3 之前,盒模型默认为 box-sizing : content-box,这种模式下的盒模型计算大小方式为,width + padding + border : 而 ...

  5. CSS before和after伪元素

    CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...

  6. 理解伪元素 :Before 和 :After

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...

  7. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  8. 伪元素before after

    什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以js无法操作他.那为什么叫他"元素"?因为我们可以对其进行跟元素几乎无差别的操作. 伪元 ...

  9. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  10. 伪元素 :Before 和 :After的学习

    层叠样式表(CSS)的主要目的是给HTML元素添加样式,然而,在一些案例中给文档添加额外的元素是多余的或是不可能的.事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,这就是“伪元素”. 你 ...

随机推荐

  1. 【C语言】了解原码、反码、补码

    原码.反码.补码 在学习C语言的过程中,有遇到补码这个问题,当时感觉懂了,有貌似不是很懂:然后查了一些文档,整理了一番,以后忘记了可以再翻开这篇文档,查漏补缺吧! 原码 原码是指一个二进制数左边加上符 ...

  2. 我的Vue朝圣之路2

    1.创建第一个Vue案例 1. 引入Vue.js   2. 创建Vue对象      el : 指定根element(选择器)      data : 初始化数据(页面可以访问)  3. 双向数据绑定 ...

  3. mysql 字符

    只适用mysql5.0以上的版本: 1.一个汉字占多少长度与编码有关:         UTF-8:一个汉字＝3个字节            GBK:一个汉字＝2个字节 2.varchar(n)表示n ...

  4. python3与Excel的完美结合

    https://segmentfault.com/a/1190000016256490 Excel 是 Windows 环境下流行的.强大的电子表格应用.openpyxl 模块让 Python 程序能 ...

  5. 3.NioEventLoop的启动和执行

    NioEventLoop启动和执行 NioEventLoop启动 在服务端启动的代码中,我们看到netty在注册和绑定时,判断了当前线程是否是NioEventLoop线程.如果不是, 则将这些操作包装 ...

  6. Gym102028G Shortest Paths on Random Forests 生成函数、多项式Exp

    传送门 神仙题-- 考虑计算三个部分:1.\(n\)个点的森林的数量,这个是期望的分母:2.\(n\)个点的所有森林中存在最短路的点对的最短路径长度之和:3.\(n\)个点的所有路径中存在最短路的点对 ...

  7. caffe模型的一些解释~

    转自:https://blog.csdn.net/wjmishuai/article/details/50890214 刚开始摸caffe,找了个比较清楚的模型. 原始数据是28* input: &q ...

  8. Java 哈希表

    public int firstUniqChar(String s){ int[] freq=new int[26]; for(int i=0;i<s.length();i++){ freq[s ...

  9. C# vb .net实现饱和度调整特效滤镜

    在.net中,如何简单快捷地实现Photoshop滤镜组中的饱和度调整呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一 ...

  10. "超时时间已到。在操作完成之前超时"的解决思路

    错误往往是数据库操作超时引起 1.检查数据库访问连接字符串启用连接池,若是,适当增大超时时间 2.ADO sqlcommand相应调整超时时长 3.关键在于优化数据库操作,优化压缩执行时间