前端 | CSS3入门

教程：http://www.lvyestudy.com/css3

1.1 CSS3简介

1.2 浏览器私有前缀

2.1 CSS3选择器简介

2.2 属性选择器

::before是伪元素，常配合content属性使用，实现为元素插入内容。对于伪元素，我们在后续章节会详细介绍。

2.3 子元素伪类选择器

1.:first-child、:last-child、:nth-child(n)、:only-child

想要实现上面同样的效果，很多初学者首先想到的是为每一个li元素都添加id或class来实现。但是这样会导致id和class泛滥，不利于网站后期的维护。而使用子元素伪类选择器，可以让结构与样式分离，使得HTML结构更加清晰，更利于后期维护和搜索引擎优化（即SEO）。

2.:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

从上面这个例子我们可以知道：:first-child在选择父元素下的子元素时，不仅要区分元素类型，还要求是第一个子元素。而:first-of-type在选择父元素下的子元素时，只需要区分元素类型，不要求是第一个子元素。

在实际开发中，一般情况下只会用到第一类子元素伪类选择器。也就是说，我们认真把第一类子元素伪类选择器掌握好就可以了。

2.4 UI伪类选择器

1.:focus

2.::selection

在CSS3中，我们可以使用::selection选择器来定义页面中被选中文本的样式。注意，::selection选择器使用的是双冒号，而不是单冒号。实际上，单冒号往往都是伪类，而双冒号往往都是伪元素。

3.:checked
在CSS3中，我们可以使用:checked选择器来定义单选框或复选框被选中时的样式。

在兼容性方面，暂时只有Opera浏览器支持:checked。由于兼容性很差，所以我们只需要简单了解一下即可。

4.:enabled和:disabled
某些表单元素如文本框、单选框、复选框等，都有“可用”和“不可用”这两种状态。

在CSS3中，我们可以使用:enabled选择器来定义表单元素“可用”时的样式，也可以使用:disabled选择器来定义表单元素“不可用”时的样式。

5.:read-write和:read-only

某些表单元素如单行文本框、多行文本框等，都有“可读写”和“只读”这两种状态。

在CSS3中，我们可以使用:read-write选择器来定义表单元素“可读写”时的样式，也可以使用:read-only选择器来定义表单元素“只读”时的样式。

2.5 其他伪类选择器

1.:root

2.:empty
在CSS3中，我们可以使用:empty选择器来选择一个“不包含任何子元素和内容”的元素，也就是选择一个空元素。

在实际开发中，对于表格中内容为空的单元格，我们往往为其设置不同的颜色，这样也会使得用户体验更好。

3.:target
在CSS3中，我们可以:target选择器来选取页面中的某一个target元素。所谓的target元素，指的是id被当成页面的锚点链接来使用的元素。
当我们点击锚点链接时，对应的target元素下面的h3字体颜色就会变成红色。在实际开发中，:target选择器一般都是结合锚点链接来使用的，这样可以实现用户体验更好的导航效果。

4.:not()
在CSS3中，我们可以使用:not()选择器来选取某一个元素之外的所有元素。这个选择器非常重要，在实际开发中用得非常多，大家要重点掌握。
如果没有借助:not()选择器，想要实现上面这种效果是非常麻烦的一件事，冗余代码也非常多。

3.1 文本样式简介

3.2 文本阴影：text-shadow

1.W3C坐标系

2.text-shadow属性简介

3.定义多个阴影

当text-shadow属性是一个值列表时，阴影效果会按从左到右的顺序应用到文本上，因此可能会出现相互覆盖的效果。但是text-shadow属性永远不会覆盖文本本身，阴影效果也不会改变文本的大小。

3.3 文本描边：text-stroke

Crhome和Firefox这两个浏览器都只能识别-webkit-前缀的text-stroke属性。你没看错，Firefox浏览器也是。这个text-stroke属性有点特殊。

文字描边效果在实际开发中并不常用，如果你有创意的话，可以结合其他技术来看看。例如，使用text-stroke配合color:transparent;，我们还可以实现镂空文字！请看下面例子。

3.4 文本溢出：text-overflow

想要实现这种多行文字的省略号效果，单纯使用CSS是无法实现的，必须借助JavaScript或jQuery才行。

这里推荐一个jQuery插件：jquery.dotdotdot.js，感兴趣的小伙伴可以自行搜索一下了解。

3.5 强制换行：word-wrap、word-break

在CSS3中，我们可以使用word-wrap或word-break来定义长单词或URL地址是否换行到下一行。

一般情况下，我们只会用到word-wrap:break-word;或word-break:break-all这两个来实现强制换行，其他属性值不需要去了解。

3.6 嵌入字体：@font-face

所谓“嵌入字体”，指的是把服务器中的字体文件下载到本地电脑，然后让浏览器端可以显示用户电脑没有安装的字体。说白了，就是给你的电脑安装某一种字体。

在CSS3中，我们可以使用@font-face方法来加载服务器端的字体，从而使得所有用户都能正常显示该字体。

有一点要特别注意，我们并不建议使用@font-face来实现嵌入中文字体。这是因为中文字体文件大多数都是10MB以上。这么大的字体文件，会严重影响页面的加载速度，导致用户体验非常差。不过对于英文字体来说，字体文件往往只有几十KB，非常适合使用@font-face。之所以中文字体文件大，而英文字体文件小，原因很简单：常用中文有几千个汉字，而英文却只有26个字母！

3.7 实战题：火焰字

4.1 颜色样式简介

4.2 opacity透明度

注意，opacity属性不仅作用于元素的背景颜色，还会作用于内部所有子元素以及文本内容。

opacity属性在实际开发用得也比较多，大多数时候都是配合:hover来定义鼠标移动到某个按钮或图片上时，改变透明度来呈现动态的效果。

4.3 RGBA颜色

RGB是一种色彩标准，由红（Red）、绿（Green）、蓝（Blue）3种颜色变化来得到各种颜色。而RGBA，说白了就是在RGB基础上增加了一个透明度通道Alpha。

从上面例子可以清楚看出来，如果对某个元素使用opacity属性，则该元素中的所有的子元素以及文本内容都会受到影响。

很多初学的小伙伴在尝试改变某个元素透明度时，大多数都是用opacity属性来处理。然后查看浏览器效果时，却发现文字的透明度也被改变了（本来是不想改变文字透明度的）！然后在那里苦恼半天都没找到解决方法。基本每一个从事前端开发的小伙伴都被这个问题困扰过。实际上，我们使用RGBA颜色来代替opacity属性，就可以轻松实现了。

4.4 CSS3渐变

在CSS3中，共有两种渐变：一种是线性渐变；另外一种是径向渐变。

1.线性渐变

2.径向渐变

其中，position和shape size都是可选参数。如果省略，则表示采用默认值。start-color和stop-color都是必选参数，可以有多个颜色值。

参数position用于定义径向渐变的“圆心位置”，取值跟background-position属性取值一样。常用取值有两种：一种是“长度值”（如10px）；另外一种是“关键字”（如top），,如下表所示。

参数start-color用于定义径向渐变的“开始颜色”，而参数stop-color用于定义径向渐变的“结束颜色”。此外，径向渐变也可以接受一个“值列表”，用于同时定义多种颜色的径向渐变。

默认情况下，径向渐变的颜色节点是均匀分布的，不过我们可以为每一种颜色添加百分比，从而使得各个颜色节点不均匀分布。

在真正的开发中，大多数渐变效果都是线性渐变，因此我们只需要重点掌握线性渐变就可以了。

4.5 实战题：渐变按钮

div {
	width: 100px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	border: 1px solid pink;
	border-radius: 5px;
	background: linear-gradient(to bottom, hotpink,pink);
	color: papayawhip;
}

4.6 实战题：鸡蛋圆

div {
	width: 160px;
	height: 100px;
	line-height: 200px;
	text-align: center;
	border: 1px solid pink;
	border-radius: 80px/50px;
	background: -webkit-linear-gradient(top left, hotpink,pink,white);
	color: papayawhip;
}

border-radius:80px/50px;表示画一个椭圆，其中椭圆水平半径为80px，垂直半径为50px。对于border-radius属性，我们会在 “17.2 圆角效果”这一节中详细介绍。

5.1 边框样式简介

5.2 圆角效果：border-radius

在前端开发中，我们都是秉着“尽量少用图片”的原则。能用CSS实现的效果，就尽量不要用图片。因为每一个图片都会引发一次HTTP请求，加上图片体积大，会极大影响页面的加载速度。

1.border-radius实现圆角

div {
	margin: 20px;
	width: 50px;
	line-height: 50px;
	border-radius: 80% 90% 100% 20%;
	text-align: center;
	border: 1px solid pink;
	background-color: hotpink;
	color: white;
}

2.border-radius实现半圆和圆

假如我们要制作上半圆，实现原理是这样的：把高度（height）设为宽度（width）的一半，并且左上角和右上角的圆角半径定义与元素的高度一致，而右下角和左下角的圆角半径定义为0。

div {
	margin: 20px;
	width: 100px;
	height: 50px;
	line-height: 50px;
	border-radius: 50px 50px 0 0;
	text-align: center;
	border: 1px solid pink;
	background-color: hotpink;
	color: white;
}

在CSS3中，圆的实现原理是这样的：元素的宽度和高度定义为相同值，然后4个角的圆角半径定义为宽度（或高度）的一半（或者50%）。

div {
	margin: 20px;
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius:  50%;
	text-align: center;
	border: 1px solid pink;
	background-color: hotpink;
	color: white;
}

如果想要实现椭圆，原理如下：元素的宽度和高度不相等，其中4个角的圆角水平半径定义为宽度的一半，垂直半径定义为高度的一半。

div {
	margin: 20px;
	width: 50px;
	height: 100px;
	/*line-height: 100px;*/
	border-radius: 25px/50px;
	text-align: center;
	border: 1px solid pink;
	background-color: hotpink;
	color: white;
}

花式半径在线产生器：https://9elements.github.io/fancy-border-radius/

5.3 边框阴影：box-shadow

这里要注意一个技巧，当x-offset和y-offset都为0时，阴影都是向外发散或者向内发散。之前很多初学的小伙伴想要实现这种效果，纠结半天也找不到解决方法，就是因为不知道这个小技巧。

5.4 多色边框：border-colors

由于border-colors兼容性太差，只有Firefox浏览器支持，因此在实际开发中用得不多，这里我们简单了解一下即可。

5.5 边框背景：border-image

在CSS3中，我们可以使用border-image属性为边框添加背景图片。

5.6 实战题：3D卡通头像

0.html框架

1.整体+外层

2.眉毛

3.眼睛

4.鼻子

5.嘴巴

6.动效

5.7 本章练习

html：

css：

* {
	margin: 0;
	padding: 0;
}

/*铜钱*/

.circle {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	border-radius: 100%;
	margin: 10px;
	border-color: transparent;
	box-shadow: 0 0 0 1px black;
}

.line {
	position: relative;
	display: inline-block;
	width: 49px;
	height: 49px;
	border: 1px solid rgba(0, 0, 0, 0);
	border-radius: 100%;
}

.one {
	border-radius: 0 0 100% 0;
	left: -2px;
	top: -2px;
	box-shadow: 1px 1px 0 0 black;
}

.two {
	border-radius: 0 0 0 100%;
	left: 51px;
	top: -53px;
	box-shadow: -1px 1px 0 0 black;
}

.three {
	border-radius: 0 100% 0 0;
	box-shadow: 1px -1px 0 0 black;
	top: -51px;
	left: -2px;
}

.four {
	border-radius: 100% 0 0 0;
	left: 51px;
	top: -102px;
	box-shadow: -1px -1px 0 0 black;
}

/*花*/

.ban {
	position: relative;
	display: inline-block;
	width: 49px;
	height: 49px;
	border: 1px solid rgba(0, 0, 0, 1);
}

.ban-one {
	border-radius: 100% 100% 0 100%;
	left: 10px;
}

.ban-two {
	border-radius: 100% 100% 100% 0 ;
	left: 4px;
}

.ban-three {
	border-radius: 100% 0 100%  100%;
	top: 50px;
	left: -102px;
}

.ban-four {
	border-radius: 0 100% 100% 100%  ;
	top: 50px;
	left: -107px;
}

/*莲花*/

.lian {
	position: relative;
	display: inline-block;
	width: 100px;
	height: 100px;
	border: 1px solid rgba(0, 0, 0, 1);
}

.lian-one {
	border-radius: 100% 0 100% 0;
	left: 157px;
	top: -100px;
}

.lian-two {
	border-radius: 0 100% 0 100%;
	left: 50px;
	top: -100px;
}

6.1 背景样式简介

6.2 背景大小：background-size

在CSS3中，我们可以使用background-size属性来定义背景图片的大小，这样可以使得同一张背景图片可以在不同的场景重复使用。

6.3 背景位置：background-origin

在CSS3中，我们可以使用background-origin属性来定义背景图片是从什么地方开始平铺的，也就是定义背景图片的位置。实际上，background-origin属性的本质是：定义background-position属性相对于什么位置来定位。background-origin往往都是配合background-position来使用的，其中background-origin定义background-position相对于什么位置来定位。

6.4 背景剪切：background-clip

简单来说，background-clip属性用于指定背景图片在元素盒子模型中的哪些区域被剪切，非常简单。

6.5 多背景图片

在实际开发中，我们并不建议使用多背景图片，而是应该制作一张复合图片来实现。因为多一张图片就会多引发一次HTTP请求，影响页面加载速度。

7.1 CSS3变形简介

从这一章开始，我们正式开始学习CSS3的动画效果了。在CSS3中，动画效果包括3个部分：变形（transform）、过渡（transition）、动画（animation）。这3个部分有很多相似的地方，不过也有着本质的区别。我们在学习的过程中一定要认真对比区分三者，这样才能加深理解和记忆。在这一章中，我们先来学习一下CSS3变形。

7.2 平移：translate()

在实际开发中，单纯对某个元素定义平移是没有太多意义的。这一章介绍的变形效果一般都是结合CSS3动画一起使用的。因此，在这一章的学习中，我们只需要掌握变形效果的语法，先不用管怎么用。至于怎么用，等我们学了CSS3动画自然就会知道了。

7.3 缩放：scale()

7.4 倾斜：skew()

7.5 旋转：rotate()

7.6 中心原点：transform-origin