css3伪类图解,CSS3伪类元素详解/深入浅出
很多朋友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after。那么就让我们一起来聊聊伪元素吧。
.SS历史
伪元素实际上在CSS1(CSS1发布于 1996年12月17 日。1999 年1月11日,此推荐被重新修订)中就存在了,只不过在后来的浏览器争霸时代发生了很多的演变。。在最初,伪元素的语法是使用“:”(一个冒号),随着web的发展,在CSS3中修订后的伪元素使用“::”(两个冒号),也就是::before 和 ::after—以区分伪元素和伪类(比如:hover,:active等)。不过索性无论你写一个冒号还是两个冒号,浏览器都将能识别它们。由于IE8(千疮百孔的IE你不懂,现在觉得最应该致敬的是那些做web开发还需要兼容IE6的程序猿们)只支持单冒号的格式,安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧!
伪元素概念
相信到这很多人都不知道伪元素到底是干嘛的?它的作用到底是做什么的,下面就让我们一起来揭开伪元素的神秘的面纱,探索伪元素背后那不为人知的故事。
伪元素直义理解就是"假元素"或者"伪装元素"。其实也可以这么理解, 伪元素实际上就是虚拟的元素,不存在的元素(code形式), 你也无发在文档中找到他们,因此说伪元素是虚拟元素。
伪元素作用
尽管作为“虚假”的元素,事实上伪元素表现上就像是“真正”的元素,我们能够给它们添加任何样式,比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。CSS 伪元素主要用于向某些选择器设置特殊效果。
伪元素用法
好了,标准的博客流程(就是前奏得揍很久,一大堆各种乱八七糟的介绍,其实我也不喜欢这些东西,但是为了向园子的大神们看近,也增加大家对伪元素的理解。 so,我们也走了一遍流程。)已经走完了。下面让我们一起来看看伪元素的用法
简单例子
首先通过一个最最简单的例子, 来告诉大家:before和:after到底是个什么东东。
.cnblogsDemo1:before {
content: '向钱看';
}
.cnblogsDemo1:after { content: '向厚看'; }
效果:
运行效果是: 向钱看 这里 向厚看, 而且"向钱看"/"向厚看"实际上是不存在的,而且这种虚假的元素在页面(测试的是谷歌浏览器)上.是无法直接复制的, 我们只是通过伪元素实现了这个"向钱看"/"向厚看"。相信看到这里大家对伪元素心里已经有了一个概念了,其实在伪元素里,我们不光可以"向钱看"/"向厚看",我们可以通过伪元素做很多事情。
水滴例子
比如我们简单实现一个水滴(比如百度地图上标记你当前位置的图标)的效果, 实现水滴效果呢我们分为三步走。
首先实现画一个圆形
height: 40px;
width: 40px;
display: block;
position: relative;
}.cnblogsDemo2 {
height: 26px;
width: 26px;
border-radius: 40px;
-webkit-border-radius: 40px; /* Safari and Chrome */
-moz-border-radius: 40px; /* Firefox */
background: #333;
}
效果:
实现画一个三角形
height: 0px;
width: 0px;
border: 10px transparent solid;
border-top-color: #333;
border-width: 15px 10px 0px 10px;
}
效果:
水滴实现
可能到这里很多园友都感觉到讲圆形和三角形有机结合的话其实就是一个水滴的效果,没错,在有:before和:after的帮助下,我们想实现水滴效果就非常简单了,只需要将二者有效的结合。
height: 40px;
width: 40px;
display: block;
position: relative;
}.cnblogsDemo4 {
width: 26px;
}
.cnblogsDemo4:before {
content: '4';
height: 26px;
width: 26px;
display: block;
position: absolute;
top: 2px;
left: 0px;
z-index: 1;
line-height: 26px;
background: #333;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
color: #fff;
text-align: center;
}
.cnblogsDemo4:after {
content: '';
height: 0px;
width: 0px;
display: block;
position: absolute;
bottom: 2px;
left: 3px;
border: 10px transparent solid;
border-top-color: #333;
border-width: 15px 10px 0px 10px;
}
效果:
水滴效果其实原理很简单,只是在:before和:after的基础上加一些定位,然后就可以将圆形和三角形有机结合成水滴,这个效果只是灯红酒绿的CSS3世界里最简单的一个实例,只是希望通过这个简单的实例让园友们领略到css3的风韵,从而了解或者喜欢CSS3.
总结
css的伪元素还有很多很多,这里就不全部列举了,需要我们一起慢慢去探索。CSS在有效的结合各种东东之后,其实可以实现很多高大上的效果,尤其是现在的[5+3]时代,更是所向披靡。
css3伪类图解,CSS3伪类元素详解/深入浅出相关推荐
- moviepy音视频剪辑:视频剪辑基类VideoClip的属性及方法详解
☞ ░ 前往老猿Python博文目录 ░ 一.概述 在<moviepy音视频剪辑:moviepy中的剪辑基类Clip详解>和<moviepy音视频剪辑:moviepy中的剪辑基类Cl ...
- python类装饰器详解-Python类中的装饰器在当前类中的声明与调用详解
我的Python环境:3.7 在Python类里声明一个装饰器,并在这个类里调用这个装饰器. 代码如下: class Test(): xx = False def __init__(self): pa ...
- JAVA中的类和对象之this的详解
系列文章目录 第一章 JAVA中的类和对象之this的详解 目录 前言 一.为什么要有this引用 二.this的三种用法 1.this.成员变量 2.this.成员方法 3.this()调用其它的构 ...
- USB CCID类协议中的APDU命令详解
出处:http://blog.chinaunix.net/uid-29124653-id-4573075.html 原文地址:USB CCID类协议中的APDU命令详解 作者:jeffasdasd 最 ...
- decimal类型对象里面定义什么类型_MySQL中Decimal类型和Float Double的区别(详解)
MySQL中存在float,double等非标准数据类型,也有decimal这种标准数据类型. 其区别在于,float,double等非标准类型,在DB中保存的是近似值,而Decimal则以字符串的形 ...
- html里的section可以设置id,html5中section元素详解
html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
- Python精讲:在Python中添加和删除集合元素详解
欢迎你来到站长在线的站长学堂学习Python知识,本文学习的是<在Python中添加和删除集合元素详解>.本知识点主要讲的是添加和删除元素,包括:在Python中向集合里面添加元素可以使用 ...
- Html块级元素详解
Html块级元素详解 *块级元素 常见的有:div , table, tr , from , ul ,li ,ol ,h1~h6, p 盒子 div 标签 <div class="bq ...
- HTML5中section由什么组成,html5中section元素详解
html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
最新文章
- VS2005下如何新建一个WINCE设备的DLL工程
- java连接sqlserver2008
- 【Hbase】eclipse下远程调试Hbase
- 浏览器字体大小怎么调_音乐文件如何升降调
- 全国区号省份mysql_中国各个省份的区号是多少
- oracle官怎么卸载网,Oracle终极彻底卸载
- python 爬取NBA中国官网球员数据
- 【Java项目实战】CRM客户关系管理系统
- 【计算机算法】递归——打印旋转方阵(正转及逆转)
- 用Java实现每天给对象发情话
- 初创公司多产品线分红篇
- python-request(基本用法)
- 北大软件工程与计算机,北京大学软件工程考研经验分享
- 十个著名的思想实验-黑客帝国思想原来是(Brain in a Vat)
- 多数组对象转为json数组格式
- UI自动化工具Cypress测试案例、生成报告---Linux版
- 国税怎么用计算机代码报税页面,增值税网上申报的详细步骤
- 数据中心节能分析和节能技术简要总结
- ios系统 越狱系统还原[平刷]
- 记录软件帮助很大---写给2018年1月的自己
热门文章
- VirtualBox 共享文件夹 挂载点设置
- SSTI了解+反序列化了解+SSRF了解+之前的一些题
- python dict sort_python sort dict 总结
- for wangwang
- National Day meets Mid-autumn Festival
- 排序算法的实现。用C语言编程实现冒泡排序、选择排序、插入排序、shell排序、快速排序、堆排序算法、归并排序。利用随机函数产生N个随机整数(10000以上)。
- Android学习|布局—— LinearLayout
- 上海凯毕淬蓝光吸收剂Blu SHIELD B004荣获专利证书
- 华章公司图书备受2010年数据库大会会员喜欢
- 希望所有计算机学生能看到这篇c语言教程