键代码分析：

/*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. HCNA(一)网络传输介质

    一 .同轴线缆 介绍:同轴线缆是一种早期的网络传输介质,同轴电缆的得名与它的结构相关,由内导体.外导体.绝缘介质和防护套四部分组成.同样支持10Mbps传输速率.现在已经基本被淘汰,不在应用于企业网络 ...

  2. python学习笔记（二）python基础知识(list,tuple,dict,set)

    1. list\tuple\dict\set d={} l=[] t=() s=set() print(type(l)) print(type(d)) print(type(t)) print(typ ...

  3. 嵌入式C语言自我修养 08：变参函数的格式检查

    8.1 属性声明:format GNU 通过 __atttribute__ 扩展的 format 属性,用来指定变参函数的参数格式检查. 它的使用方法如下: __attribute__(( forma ...

  4. 基于STM32的简易磁卡充值系统

    使用的是MFRC522射频模块,把磁卡放入感应区后,可以执行三种操作: 初始化磁卡金额 读取卡内金额 向卡内写入金额(充值) 本来想着回学校了能把洗浴卡的金额给改掉,实现帝皇般的尊贵洗浴享受(不花钱… ...

  5. 20155213 第十二周课堂作业MySort

    20155213 第十二周课堂作业MySort 作业要求 模拟实现Linux下Sort -t : -k 2的功能 参考 Sort的实现 提交码云链接和代码运行截图 初始代码 1 import java ...

  6. 20155213 《JAVA程序设计》实验二（JAVA面向对象程序设计）实验报告

    20155213 <JAVA程序设计>实验二(JAVA面向对象程序设计)实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S ...

  7. 20155220 2016-2017-2《Java程序设计》第五周学习总结

    20155220 2016-2017-2<Java程序设计>第五周学习总结 教材学习内容总结 异常处理 Java异常处理通过5个关键字try.catch.throw.throws.fina ...

  8. MAVEN相关文章

    Maven入门指南① :Maven 快速入门及简单使用 Maven入门指南② :Maven 常用命令,手动创建第一个 Maven 项目 Maven入门指南③:坐标和依赖 Maven入门指南④:仓库 M ...

  9. C++从静态对象的初始化顺序理解static关键字

    问题 首先考虑一个全局变量的初始化顺序问题 在头文件1中: extern int b; ; 在头文件2中: extern int a; ; 源文件中包含了头文件1和头文件2,这种情况下a和b可能的值是 ...

  10. 人脸检测及识别python实现系列（6）——终篇：从实时视频流识别出“我”

    人脸检测及识别python实现系列(6)——终篇:从实时视频流识别出“我” 终于到了最后一步,激动时刻就要来临了,先平复一下心情,把剩下的代码加上,首先是为Model类增加一个预测函数: #识别人脸 ...