键代码分析：

/*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. 关于虚拟机linux网络的一个问题（基于cntos7）

    刚刚开始学习搭建Linux集群,目前出现的比较麻烦的一个问题是Linux网络ip问题.其实网上好多出现类似问题的解答大部分说是因为克隆的问题,但实际情况先克隆产生的问题应该是很好排查的.所幸,有博主针 ...

  2. Ruby中区分运行来源的方法(转)

    Ruby中区分运行来源的方法 这篇文章主要介绍了Ruby中区分运行来源的方法,本文讲解的是类似Python中的if name == 'main':效果,其实Ruby中也有类似语法,需要的朋友可以参考下 ...

  3. 浅谈JVM编译原理->.java文件转变为.class文件的过程

    为什么需要编译? 我们平常写代码,有规范的命名方式,都能够看得懂,但是我们写的代码计算机是看不懂的,所以需要编译,也就是一个转换的过程,如下: 1.这个是咱们平时写的代码,就比较好理解,对人友好 2. ...

  4. 【 C 】高级字符串查找之 strspn 和 strcspn 的思考

    我的CSDN博客 strspn 这个库函数是真的很难理解,看了很多中文描述,反正都是不知所云,给出一系列的例子,结果也是让我瞠目结舌,荒唐.荒谬.荒诞! 特此记录理解过程,最后竟然是百度百科让我明白了 ...

  5. 【C】对指针表达式的个人总结与思考

    本文内容参考<c 和 指针>. 声明:本博文只为那些能沉得住气,认真研究,探索真知的人参考,浮躁的人请离开,因为看不懂. 感觉以前学c的时候,学的指针真是白学了,今天看到这个内容,困惑后, ...

  6. React 组件间通信

    https://jsfiddle.net/69z2wepo/9719/ <script src="https://facebook.github.io/react/js/jsfiddl ...

  7. 《阿里巴巴Java开发手册》代码格式部分应用——idea中checkstyle的使用教程

    <阿里巴巴Java开发手册>代码格式部分应用--idea中checkstyle的使用教程 1.<阿里巴巴Java开发手册> 这是阿里巴巴工程师送给各位软件工程师的宝典,就像开车 ...

  8. 20155204 实验3《敏捷开发与XP实践》实验报告

    20155204 实验3<敏捷开发与XP实践>实验报告 一.实验内容与步骤 1.研究IDEA的code菜单. 老师给的任务的是把一串代码格式化,这个任务很简单.code菜单主要是关于编辑代 ...

  9. apt-get doesn't work

    apt-get upgrade Reading package lists... DoneBuilding dependency tree       Reading state informatio ...

  10. 通过java反射机制获取该类的所有属性类型、值

    转自:http://blog.csdn.net/sd4000784/article/details/7448221 方法使用了这俩个包下的 field 和method import Java.lang ...