1 回顾
1.1 基本语法
1. 浏览器私有前缀
-webkit-
-moz-
-ms-
-o-
2. 新增的长度单位
rem
vw
vh
vmax
min
3. 新增的颜色设置方式
rgba()
hsl()
hsla()
1.2 CSS3 选择器
1. 基本选择器
标签名选择器
类名选择器
ID名选择器
全局选择器 *
交集选择器
并集选择器（群组选择器）
2. 层级选择器
后代元素选择器
子元素选择器
相邻兄弟选择器 +
通用兄弟选择器 .item~p
3. 属性选择器
[属性名]
[属性名="值"]
[属性名^="值"]
[属性名$="值"]
[属性名*="值"]
[attr1][attr2="value"]
4. 伪类选择器
4.1 动态伪类选择器
:link
:visited
:hover
:active
:focus
4.2 目标伪类选择器
:target
4.3 语言伪类选择器
:lang()
4.4 UI元素伪类选择器
:disabled
:enabled
:checked
4.5 结构伪类选择器
:root
:empty
:first-child
:last-child
:nth-child(n)
:nth-last-cihld(n)
:only-child
:first-of-type
:last-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:only-of-type
4.6 否定伪类选择器
:not(选择器)
5. 伪元素选择器
::first-letter
::first-line
::before
::after
::placeholder
::selection
1.3 盒子模型新增属性
1. box-sizing
content-box 默认值
border-box
2. box-shadow 盒子阴影
水平偏移 垂直偏移 模糊值 外延值 颜色 inset
3. opacity 不透明度
0 ~ 1 之间的小数
1.4 CSS3 所有选择器的权重
ID名选择器 > 类名选择器、伪类选择器、属性选择器 > 标签名选择器、伪元素选择器 > 全局选择器
2 CSS3 新增背景属性
3.1 新增属性
-
background-origin 设置背景图调整位置所在坐标系的原点
padding-box 默认值，原点在内边距上 border-box 原点在边框上 content-box 原点在内容上 -
background-clip 裁剪背景图，设置什么范围内的背景图可见
border-box 默认值，边框以外的背景图不可见。 padding-box 内边距以外的背景图不可见，内容和内边距上可见背景图 content-box 内容以外的背景图不可见，只有内容可见背景图 text 只有文字上的背景图可见， 需要设置私有前缀 -webkit- -
background-size 调整背景图图片的大小
通过长度（像素单位、百分比都可以）指定大小，需要两个值，一个宽一个高 auto 默认值，原图大小 contain 在保证背景图原比例的前提下，以适当的尺寸显示在元素，可能会造成元素一小部分没有背景图 cover 在保证背景图原比例的前提下，图片尽可能全地显示在元素上，可能会对图片裁切一部分。注意：
cover 是非常常用的值。
3.2 background 复合属性
background: url(../images/shanghai.jpg) 50px 50px/cover content-box padding-box;
注意：
- origin 和 clip 的值一样，如果复合属性中只有一个值，origin 和 clip 都设置；如果设置了两个值，前面的是origin，后面的clip。
- size 的值必须写在 position 值的后面，并且用
/分开。
3.3 多背景图
CSS3 允许元素设置多个背景图片
/* 添加多个背景图 */
background: url(../images/bg-tl.png) no-repeat,
url(../images/bg-tr.png) no-repeat right top,
url(../images/bg-bl.png) no-repeat left bottom,
url(../images/bg-br.png) no-repeat right bottom;
3 CSS3 新增边框属性
3.1 边框圆角
-
border-top-left-radius 设置左上角的圆角半径； 一个值正圆半径，两个值分别是椭圆的x半径和y半径。
-
border-top-right-radius 设置右上角的圆角半径； 一个值正圆半径，两个值分别是椭圆的x半径和y半径。
-
border-bottom-right-radius 设置右下角的圆角半径； 一个值正圆半径，两个值分别是椭圆的x半径和y半径。
-
border-bottom-left-radius 设置左下角的圆角半径； 一个值正圆半径，两个值分别是椭圆的x半径和y半径。
-
border-radius 复合属性。
正圆圆角： 1个值： 4个角的圆角半径； 2个值： 左上和右下， 右上和左下； 3个值： 左上， 右上和左下，右下 4搁置： 左上，右上，右下，左下 椭圆圆角： 把 x半径和 y半径用 / 分开 / 左边的是 x 边距，右边的是 y 半径；各自都可以写 1 ~ 4 各论各的。
3.2 外轮廓
- outline-width 外轮廓的宽度。
- outline-color 外轮廓的颜色。
- outline-style 外轮廓的风格。值： none、solid、dashed、dotted 与 border-style 一致。
- outline 复合属性，同时设置宽度、颜色和风格。
- outline-offset 设置外轮廓与边框的距离，正负值都可以设置； 不是 outline 的子属性，是一个独立的属性。
注意：
- 外轮廓不是盒子的一部分，在文档流中也不占位置。
- 外轮廓默认显示在边框的外边，如果调整位置与边框重合的话，会在边框的上面。
- 通常用来去掉输入框默认的外边框
outline:none;
4 CSS3 新增文本属性
-
text-align-last 最后一行文本的对齐方式；值：left、right、start（默认值）、end、justify、center。
-
text-shadow 设置文本阴影； 最多可以设置4个值，水平偏移位置、垂直偏移位置、模糊值、颜色； 可以添加多个阴影，用逗号隔开。
-
white-space 设置文本换行方式。
normal 默认值，文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。 pre 原样输出，与 pre 标签的效果相同。 pre-wrap 在pre效果的基础上，超出元素边界自动换行。 pre-line 在pre效果的基础上，超出元素边界自动换行，只识别文本中的换行，空格会忽略。 nowrap 强制不换行最常用的值是 nowrap。
-
text-overflow 用于设置文本溢出截断并添加省略号。 值 clip、ellipsis（设置为省略号）
设置
text-overflow: ellipsis成立生效的前提是，设置overflow:hidden还有设置white-space:nowrap/* 先设置内容溢出 */ overflow: hidden; /* 强制显示在一行 */ white-space: nowrap; /* 文本溢出 */ text-overflow: ellipsis; -
text-decoration-line 相当于 CSS2 中的 text-decoration，值： underline、overline、line-throuth、none
-
text-decoration-style 设置文本修饰线的风格，值： solid、dashed、double、dotted、wavy(波浪线)
-
text-decoration-color 设置文本修饰线的颜色。
-
text-decoration 在 CSS3中 成了复合属性。
5 CSS3 渐变
可以使用 CSS 代码创建一个渐变，渐变会被 CSS 当做图片。 要使用渐变必须通过使用图片的 CSS 属性，如 background-image。
5.1 线性渐变
/* 多个颜色之间的渐变， 默认从上到下渐变 */
linear-gradient(red, green);
linear-gradient(red, yellow, green);
/*设置线性渐变的方向*/
/* 使用关键字 to left、to top、 to right、to bottom、to left top、to right bottom ....*/
background-image: linear-gradient(to bottom, red, yellow, green);
background-image: linear-gradient(to right, red, yellow, green);
background-image: linear-gradient(to left, red, yellow, green);
background-image: linear-gradient(to left top, red, yellow, green);
/* 使用角度设置方向， 0deg 丛上到下的， 随着角度增大，方向会顺时针旋转*/
background-image: linear-gradient(10deg, red, yellow, green);
/*设置颜色的位置， 指定颜色从哪里开始渐变，没有渐变的地方显示纯色*/
background-image: linear-gradient(90deg, red 100px, green 200px);
background-image: linear-gradient(90deg, #369 10%, cyan 70%, pink 90%);
线性渐变需要设置的选项有：
- 渐变方向
- 渐变的颜色
- 渐变的每个颜色的位置
5.2 径向渐变
.box01 {
background-image: radial-gradient(red, green);
background-image: radial-gradient(red, yellow, green);
}
/* 调整渐变的圆心位置 */
.box02 {
background-image: radial-gradient(at left top,red, yellow, green);
background-image: radial-gradient(at 100px 40px,red, yellow, green);
}
/* 调整渐变的形状 */
.box03 {
background-image: radial-gradient(circle at center center,red, yellow, green);
}
/* 调整形状的半径 */
.box04 {
background-image: radial-gradient(circle 20px at center center,red, yellow, green);
}
/* 调整颜色的位置 */
.box05 {
background-image: radial-gradient(circle 50px at center center,red 10px, yellow 40px, green);
}
径向渐变需要设置的选项：
- 渐变的圆心位置
- 渐变的形状（正圆或椭圆）
- 渐变半径
- 渐变的颜色
- 渐变的每个颜色位置。
5.3 重复渐变
- repeating-linear-gradient() 重复先行渐变 参数同linear-gradient()
- repeating-radial-gradient 重复径向渐变 参数同radial-gradient()
/* 笔记本的横线效果 */
background-image: repeating-linear-gradient(transparent 0, transparent 29px, #333 30px);
background-origin: content-box;
background-clip: content-box;
6 WEB字体
6.1 web 字体基本语法
指定字体的地址，用户浏览器可以下载
@font-face {
font-family: 'diyfont';
src: url('diyfont.eot'); /* IE9兼容模式 */
src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */
url('diyfont.woff') format('woff'), /* chrome、firefox opera safari IE9+ 最佳格式 */
url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
6.2 定制字体
中文的字体文件是比较大，使用完整的字体文件不现实； 通常针对某几个文字单独定制只显示这几个文字的字体。
- www.iconfont.cn/webfont?spm… 阿里Web字体 定制工具
6.3 字体图标
把图标设置成字体，像使用文字一样使用图标，可以使用 font-size 设置大小，使用color 设置颜色， 放大不会是真。
常见的字体图标库：
- 阿里图标 www.iconfont.cn/
- Font Awesome fontawesome.dashgame.com/
- Glyphicons Halfings glyphicons.com/
