键代码分析：

/*css代码*/

.effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }

css3 伪元素 ::before ::after的更多相关文章

  1. 使用 CSS3 伪元素实现立体的照片堆叠效

    CSS3 里引入的伪元素让 Web 开发人员能够在不需要额外添加 HTML 标签的情况下制作出复杂的视觉效果.例如,:before 和 :after 这个两个 CSS3 伪元素就可以帮助你实现很多有趣 ...

  2. 使用css3伪元素制作时间轴并且实现鼠标选中高亮效果

    利用css3来制作时间轴的知识要点:伪元素,以及如何在伪元素上添加锚伪类 1)::before 在元素之前添加内容. 2)::after 在元素之后添加内容. 提示:亦可写成 :before :aft ...

  3. css3 伪元素和伪类选择器详解

    转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2. ...

  4. 基于CSS3伪元素和动画绘制旋转太极图

    通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...

  5. CSS3伪元素、伪类选择器

    伪元素选择器: ::first-letter:为某个元素中的文字的首字母或第一个字使用样式. ::first-line:为某个元素的第一行文字使用样式. ::before:在某个元素之前插入一些内容. ...

  6. Css3 伪元素

    伪元素---用于向某些选择器设置特殊的效果 语法:元素::伪元素 (element::pseudo-element) 兼容性:IE9+ FireFox4+ Chrome Safari Opera fi ...

  7. CSS3伪元素 ::first-letter ::first-line ::selection

    首先,关于伪元素的语法: 有的时候单冒号也能用,但最好写双冒号. 伪类:匹配的是元素(不同状态或结构的). 伪元素:匹配的是元素中的一部分内容(首字符,首行文本). ::first-letter 匹配 ...

  8. CSS3伪类和伪元素

    作为一个CSS3初学不久者来说,很容易混淆单冒号(:)和双冒号(::)的用法,以为两者可以互换着来使用.我自己之前也混淆过他们,因为两者看起来太相像了,就像孪生兄弟.但实际上,他们的区别还是挺大的,最 ...

  9. css3的伪（伪类和伪元素）大合集

    本文讲css3的伪,不是讲它有多虚伪,而是说它的伪元素样式.不得不说以前虽知html伪元素,但很少用,后得知借助css3伪元素可以发挥极大的便利.故总结css3的伪如下: CSS中存在一些比较特殊的属 ...

随机推荐

  1. node.js(二)

    今天我们学习如何运行起来一个项目,我还不会新建项目,所以我们打开一个小伙伴创建的项目,我用的开发工具是vscode 选择项目所在文件夹就好了. 打开后是这样子的 我们还要安装一下npm, 在这里安装, ...

  2. 安装虚拟机与初触linux心得

    安装虚拟机与初触linux心得 安装虚拟机 不知道是电脑问题还是软件问题,我安装虚拟机的过程异常坎坷,首先我在官网,360,太平洋等地方下载的virtualbox5.0以后的软件普遍有问题,问题是打不 ...

  3. 20155230 《Java程序设计》实验五 Java网络编程及安全

    20155230 <Java程序设计>实验五 Java网络编程及安全 实验内容 1．掌握Socket程序的编写: 2．掌握密码技术的使用: 3．设计安全传输系统. 实验1 两人一组结对编程 ...

  4. 20155239 2016-2017-2 《Java程序设计》第9周学习总

    教材学习内容 JDBC 简单功能 连接数据源,如数据库 传给数据库查询和更新指令 获取并处理数据库返回结果(对查询等的响应) public void connectDBAndQuery(String ...

  5. 20155307 实验四 Android程序设计

    在安装as的过程中一路顺风,一点问题都没有,但是在编译的时候总是出现错误,无论是我用自己的手机还是虚拟的手机都不能成功. 但是我上网百度,发现错误原因为compileSdkVersion的版本出了问题 ...

  6. 20145234黄斐《java程序设计》第三周

    教材学习内容总结 类与对象 定义:对象,与过程相对. Java中变量有2种类型,一个是基本类型,另一个则是类类型.基本类型在之前学过,本次学习类类型.使用Java撰写程序几乎都是在使用对象,要产生对象 ...

  7. PostgreSQL通过mysql_fdw访问MySQL数据库

    Mysql与PostgreSQL的安装过程省略. 为简便起见,把MySQL和PostgreSQL都安装在一个机器上,然后在此机器上(准确地说是在PostgreSQL运行的机器上)安装mysql_fdw ...

  8. cogs2109 [NOIP2015] 运输计划

    cogs2109 [NOIP2015] 运输计划 二分答案+树上差分. STO链剖巨佬们我不会(太虚伪了吧 首先二分一个答案,下界为0,上界为max{路径长度}. 然后判断一个答案是否可行,这里用到树 ...

  9. JavaWeb(十三)——使用Session防止表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  10. selenium自动化之js处理点击事件失效

    有时候,元素明明已经找到了,使用click()就是无法触发点击事件(当然,这种情况十分少见,至少我只遇到过一次).下面告诉大家这种场景的解决方案. 使用js代码来点击[博客园]这个按钮 代码: #!/ ...