键代码分析：

/*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. 笔记(assert 断言)

    并发:在同一个时间段交替执行多个任务并行:在同一个时间点同时执行多个任务串行:同时执行的多个任务按顺序执行(换句话说就是一个任务执行完后才能执行下一个任务) #mysql limit用法: selec ...

  2. Angular 7 版本

    Angular 7 版本 这是跨整个平台的主要版本,更新包括核心框架,Angular Material和CLI. 如何更新到v7 可以访问update.angular.io以获取有关更新应用程序的详细 ...

  3. HTML5 学习笔记 | LOADING...

    一.HTML5基础知识 1.1 属性规范 1)元素应当合理嵌套 2)属性最好使用““包括 3)大小写不区分 1.2 常用html5标签 1)<!DOCTYPE> 定义文档类型 2)< ...

  4. Pytorch之认识Variable

    Tensor是Pytorch的一个完美组件(可以生成高维数组),但是要构建神经网络还是远远不够的,我们需要能够计算图的Tensor,那就是Variable.Variable是对Tensor的一个封装, ...

  5. 第9周 实现PWD命令

    第9周 实现PWD命令 码云链接:https://gitee.com/bestiisjava2017/laura5332/blob/master/%E4%BF%A1%E6%81%AF%E5%AE%89 ...

  6. 浅入tcp

    1.认识TCP tcp协议是传输层协议,它的最主要的3个特点是面向连接.可靠保证.基于字节流.当应用层把数据给tcp层时,注意如果数据大于MSS是要在tcp层进行分段的.tcp协议为了保证不丢包会给每 ...

  7. string[]转换为int[]

    今天碰到一个问题,要把string[]转换为int[],但是又不想使用循环转换,找了好久最后找到了这种方法,特此记录下. string[] input = { "1", " ...

  8. Arduino 101/Genuino101使用-第2篇

    1. Arduino 101编程只是在ARC的核心上进行,其具体架构为ARCv2EM.. 2. 而Quark核心,从目前可知的信息来看,其应该运行着名为Zephyr的RTOS 3.101并没有EEPR ...

  9. 那些不能遗忘的知识点回顾——C/C++系列（笔试面试高频题）

    有那么一些零碎的小知识点,偶尔很迷惑,偶尔被忽略,偶然却发现它们很重要,这段时间正好在温习这些,就整理在这里,一起学习一起提高!后面还会继续补充. ——前言 1.面向对象的特性 封装.继承.多态. 封 ...

  10. python全栈开发-面向对象-初识2

    python_17_day 今日主要内容: 1.类空间,对象空间,查询顺序. 2.组合. 1.类空间,对象空间,查询顺序. class Person: animal = '高级动物' soul = ' ...