# CSS3 介绍

# CSS3 简介

CSS3 是 CSS（层叠样式表）技术的升级版本，于 1999 年开始制订，2001 年 5 月 23 日 W3C 完成了 CSS3 的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS 演进的一个主要变化就是 W3C 决定将 CSS3 分成一系列模块。浏览器厂商按 CSS 节奏快速创新，因此通过采用模块方法，CSS3 规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时间支持不同特性，这也让跨浏览器开发变得复杂。在新的或实验性的 CSS3 功能成为正式的 CSS3 规范之前，或者在一个规范的功能还没有最后确定之前，CSS 厂商前缀是浏览器公司提供对齐支持的一种方式。

可能使用的前缀有:

Chrome: -webkit-

Firefox: -moz-

IE: -ms-

IOS: -webkit-

Opera: -o-

safari: -webkit-

在大多数情况下，当你需要使用 CSS3 规范中的属性且需要使用一个前缀的时候，针对所使用的浏览器，添加上面的前缀就可以了。例如：如果想要添加一个 CSS 过渡效果，使用transition属性，并且先添加如下前缀:

-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;

用户的浏览器将会对它所理解的过渡功能版本做出响应，而忽略其他的版本。目前浏览器厂商对于全面实现所有的 CSS3 功能竭尽全力，并且对于大多数现代浏览器来说，需要添加前缀的属性的数目正在快速减少。

对于那些功能需要添加前缀，可以浏览: http://shouldiprefix.com/，处理添加前缀可以使用Autoprefixer插件，使用方式查看https://github.com/postcss/autoprefixer

# CSS3 新内容

# 选择器

CSS3 新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3 选择器与 jQuery 中所提供的绝大部分选择器兼容。

属性选择器通过属性来选择元素
- E[attr] 选择包含 attr 属性的所有元素
- E[attr=mydemo] 选择属性 attr 的值等于 mydemo 字符的所有元素
- E[attr*=mydemo] 选择属性 attr 的值任意位置包含 mydemo 字符的所有元素
- E[attr^=mydemo] 选择属性 attr 的值开始位置包含 mydemo 字符的所有元素
- E[attr$=demos] 选择属性 attr 的值结束位置包含 mydemo 字符的所有元素

示例:

<style>
	* {
		margin: 0;
		padding: 0;
	}
	p[title] {
		color: red;
	}
	p[title="hello"] {
		color: green;
	}
	p[class*="e"] {
		color: orange;
	}
	p[class$="o"] {
		color: #0000ff;
	}
	p[class^="w"] {
		color: purple;
	}
	p[data-name] {
		font-size: 25px;
	}
</style>

<body>
	<p title="hello">今天天气真好啊</p>
	<p title="nice">今天天气真好啊</p>
	<p class="word">今天天气真好啊</p>
	<p class="text">今天天气真好啊</p>
	<p class="texa">今天天气真好啊</p>
	<p class="ao">今天天气真好啊</p>
	<p data-name="today">今天天气真好啊</p>
</body>

伪类选择器除了以前学过的:link、:active、:visited、:hover，CSS3 又新增了其它的伪类选择器
- 结构伪类重点通过 E 来确定元素的父元素。 + E:first-child 第一个子元素 + E:last-child 最后一个子元素 + E:nth-child(n) 第 n 个子元素 + E:nth-last-child(n) 同 E:nth-child(n) 相似，只是倒着计算 + n 是支持简单表达式的 + 注意: n 是从 0 开始的自然数 E:nth-child(0) 无效
- 目标伪类 + E:target 结合锚点进行使用，处于当前锚点的元素会被选中 + html <style> li:target{ font-size: 30px; color: blue; } <style> <body> <a href="#li3">点我</a> <li id="li3">li3</li> </body>
- 伪元素 + E::before、E::after 默认行内元素 content 属性必须写 + E::first-letter文本的第一个字母或字 + E::first-line 文本第一行 + E::selection 被选中的文本 + ":" 与 "::" 用于区分伪类和伪元素

# 颜色的变化

三种颜色的表达方式:

#000000 十六进制表示颜色 ff0000/f00 表示红色 00ff00/0f0 表示绿色 0000ff/00f 表示蓝色
8位数十六进制颜色的最后两位表示透明度大小 #00000000 详情参见下方百分比转化表 rgba(0,0,0,0)/rgb(0,0,0)
Red、Green、Blue、Alpha 即 RGBA hsla(0,20%,50%,.7) Hue、Saturation、Lightness、Alpha 即 HSLA H 色调 取值范围 0~360
360表示红色、120表示绿色、240表示蓝色 S 饱和度 取值范围 0%~100% L 亮度 取值范围 0%~100% A 透明度 取值范围 0~1
关于透明度： 1、 opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度 2、 transparent
不可调节透明度，始终完全透明 一般元素透明使用 opacity, 制作制作遮罩层常用 rgba, 制作三角形常用 transparent

百分比的透明度对应的十六进制的透明度

100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00

# 阴影

文本阴影

text-shadow: h-shadow(x) v-shadow(y) blur(模糊半径) color(颜色)

1、水平偏移量正值向右负值向左

2、垂直偏移量正值向下负值向上

3、模糊半径是不能为负值

4、可以有多个影子，用逗号隔开案例:浮雕文字

盒子阴影

box-shadow: h-shadow(x) v-shadow(y) blur(模糊半径) spread(扩展范围) color(颜色) inset(是否内嵌,可省略)

# 盒模型

CSS3 中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变

content-box: 对象的实际宽度等于设置的 width 值和 border、padding 之和 (默认方式)
border-box：对象的实际宽度就等于设置的 width 值，即使定义有 border 和 padding 也不会改变对象的实际宽度，即 ( Element width = width )

我们把这种方式叫做 css3 盒模型

# 边框图片

border-image 属性是一个简写属性，用于设置以下属性：

border-image-source 图片来源
border-image-slice 图片边框向内偏移量不写单位,默认像素,也可以是百分比
border-image-width 边框宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched 默认) 可以写 2 个值,一个代表水平方向,一个代表垂直方向

示例:

.box {
	border: 20px solid red;
	border-image-source: url("img/bg.png");
	border-image-slice: 20;
	border-image-outset: 20;
	border-image-width: 20px;
	border-image-repeat: stretch;
	background-color: orange;
}

简写形式存在争议具体请参考MDN border-image 语法

# 渐变

线性渐变沿着某条直线朝一个方向产生渐变效果

语法: background: linear-gradient(direction, color-stop1, color-stop2, ...);

direction: 方向 可以是 角度(10deg)顺时针  也可以是 to top/left/right/bottom
	eg: background: linear-gradient(right ,red 60%,orange 80%);
颜色后面可以跟百分比,表示从百分几开始渐变
渐变的兼容写法 方向是相反的  而且不带to
	eg: background: -webkit-linear-gradient(right ,red 60%,orange 80%);

重复渐变: background: repeating-linear-gradient(to right,red 0, red 10%, purple 10%, purple 20%)
可简写为: background: repeating-linear-gradient(to right,red 0 10%, purple 10% 20%)
一般是通过ui设计稿 直接提取的渐变 角度 颜色比重

径向渐变从一个中心点开始沿着四周产生渐变效果

语法: background: radial-gradient((shape? size? (at position?))?, start-color, ..., last-color) ? 表示可省略

shape 渐变形状 : circle | ellipse(椭圆)
size 渐变大小:
	closest-side（指定径向渐变的半径长度为从圆心到离圆心最近的边）
	closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
	farthest-side（指定径向渐变的半径长度为从圆心到离圆心最远的边）
	farthest-corner（指定径向渐变的半径长度为从圆心到离圆心最远的角）
	也可指定大小: 需要注意的是 若渐变形状为圆形，则该渐变大小只能设置一个数且不能为百分数，而椭圆既可以为具体数值也可以为百分数

	注意: 只传一个值默认形状为圆形,传入的是半径大小,不能为百分比;
				传两个值则代表形状为椭圆形,第一个是x轴半径,第二个是y轴半径
				圆心位置参数一定要置于radial-gradient()第一个参数的末尾，顺序千万不能放反了

	重复渐变 : background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);
	可简写为: background: repeating-radial-gradient(circle at center,#f00 0 10%,#ff0 10% 20%);

# 背景图片加强

background-size设置背景图片的尺寸
- cover 会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏
- contain 会自动调整缩放比例，保证图片始终完整显示在背景区域
- 注意：是需要根据高度还是宽度适配 width height 直接设置宽高(px 值或者百分比)
background-origin(原点，起点)设置背景定位的原点
- border-box 以边框做为参考原点；
- padding-box 以内边距做为参考原点；
- content-box 以内容区做为参考点；
background-clip设置背景区域 clip(裁切)
- border-box 裁切边框以内为背景区域；
- padding-box 裁切内边距以内为背景区域；
- content-box 裁切内容区做为背景区域
以逗号分隔可以设置多背景，可用于自适应局
- background: url("img/1.jpg") no-repeat left top, url(img/2.jpg) no-repeat right top;

# 过渡

transition 过渡实现元素不同状态间的平滑过渡，经常用来制作动画效果

transition: transition-property transition-duration transition-timing-function transition-delay
		transition-property   规定应用过渡的 CSS 属性的名称 (一般都写 all);
		transition-duration   定义过渡效果花费的时间。默认是 0
		transition-timing-function: 规定过渡效果的时间曲线。默认是 "ease"。
					linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
		transition-delay 			规定过渡效果何时开始。默认是 0

transform 用于设置转换动画如旋转、位移、倾斜等

transform: scale? translate? rotate? skew?;
缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值，设置一个值时表示 x、y同时进行缩放
移动 translate(x, y) 可以改变元素的位置，x、y可为负值
旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针
倾斜 skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换
		skewX(x-angle) 	定义沿着 X 轴的 2D 倾斜转换
		skewY(y-angle)	定义沿着 Y 轴的 2D 倾斜转换

rotateX/Y/Z 		沿X/Y/Z轴旋转
translateX/Y/Z 	沿X/Y/Z轴移动

# 透视

perspective有两种写法

a) 作为一个属性，设置给父元素，作用于所有 3D 转换的子元素 b) 作为 transform 属性的一个值，作用于元素自身,子元素的 3D 效果可呈现 透视会产生近大远小的效果 backface-visibility：visible/ hidden 设置元素背面是否可见

结合透视和 3D 转换画一个立方体:

<style>
	* {
		margin: 0;
		padding: 0;
	}
	.box {
		position: relative;
		width: 200px;
		height: 200px;
		margin: 50px auto;
		border: 1px dashed red;
		transform-style: preserve-3d;
		transition: all 2s linear;
		transform: rotateX(25deg) rotateY(25deg);
	}

	.box div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.font {
		transform: translateZ(100px);
		background-color: blue;
	}
	.behand {
		transform: translateZ(-100px);
		background-color: pink;
	}
	.left {
		transform: translateX(-100px) rotateY(90deg);
		background-color: red;
	}
	.right {
		transform: translateX(100px) rotateY(90deg);
		background-color: brown;
	}
	.top {
		transform: translateY(-100px) rotateX(90deg);
		background-color: yellow;
	}
	.bottom {
		transform: translateY(100px) rotateX(90deg);
		background-color: purple;
	}

	.box:hover {
		transform: rotateX(360deg) rotateY(360deg);
	}
</style>
<body>
	<div class="box">
		<div class="font"></div>
		<div class="behand"></div>
		<div class="left"></div>
		<div class="right"></div>
		<div class="top"></div>
		<div class="bottom"></div>
	</div>
</body>

# 动画

动画是 CSS3 中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

必要元素：

a、通过@keyframes指定动画序列；
b、通过百分比将动画序列分割成多个节点；亦可以使用 from/to 不推荐
c、在各节点中分别定义各属性
d、通过 animation 将动画应用于相应元素

关键属性:

Animation-name 动画名称(必填)
Animation-duration 动画持续时间(必填)
animation-timing-function
- linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n) 特定的贝塞尔曲线类型，4 个数值需在[0, 1]区间内 + steps(n) 参数 n 为指定的间隔数，即把动画分为 n 步阶段性展示，n 必须是正整数
animation-delay 动画延迟（只是第一次）
animation-iteration-count 重复次数 infinite 无限次
animation-direction 动画是否重置后再开始播放
- alternate 动画直接从上一次停止的位置开始执行，倒着来
- normal 动画第二次直接跳到 0%的状态开始执行
animation-fill-mode 动画执行完毕后状态
- forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
- backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
- both 设置对象状态为动画结束或开始的状态，结束时状态优先

简写语法: animation: name duration timing-function delay iteration-count direction fill-mode;

name duration 必须写,其余可以都不写

animation-play-state 播放状态（ running 播放和 paused 暂停）

# 过渡/动画监听

过渡只有监听结束的方法, start 和 run 的监听方法在开发状态 ele.addEventListener("transitionend", myFunction);

动画的事件：

animationstart CSS 动画开始后触发
animationiteration CSS 动画重复执行时触发
animationend CSS 动画完成后触发

监听语法: ele.addEventListener("animationend", myStartFunction);

<style>
	.box {
		width: 100px;
		height: 100px;
		background-color: orange;
		animation: move 2s 2s 5;
	}
	.d2 {
		width: 100px;
		height: 100px;
		background-color: red;
		margin: 50px;
		transition: all ease 1s;
	}
	.d2.active {
		transform: translateX(200px);
	}
	@keyframes move {
		0% {
			transform: translate(0px);
		}
		100% {
			transform: translate(300px);
		}
	}
</style>
<body>
	<div class="box"></div>
	<div class="d2"></div>
	<script>
		var box = document.querySelector(".box");
		var d2 = document.querySelector(".d2");
		box.addEventListener("animationstart", function() {
			console.log("动画开始了...");
		});
		box.addEventListener("animationiteration", function() {
			console.log("动画重复执行了...");
		});
		box.addEventListener("animationend", function() {
			console.log("动画执行结束了...");
			//开启d2的过渡效果
			box.classList.add("active");
		});
		// 过渡只有监听结束的方法,  start 和 run 的监听方法在开发状态
		d2.addEventListener("transitionend", function() {
			console.log("过渡结束...");
		});
	</script>
</body>

← HTML5介绍 FLEX 布局 →