一、CSS3简介
1、CSS3概述
CSS3 是 CSS2 的升级版本，他在CSS2的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
CSS在未来会按照模块化的方式去发展：https://www.w3.org/Style/CSS/current-work.html**CSS3 的新特性如下：
1、新增了更加实用的选择器**，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。
2、新增了更好的视觉效果 ，例如：圆角、阴影、渐变等。
3、新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。
4、新增了全新的布局方案------ 弹性盒子。
5、新增了 Web 字体，可以显示用户电脑上没有安装的字体。
6、增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度。
7、增加了 2D 和3D 变换，例如：旋转、扭曲、缩放、位移等。
8、增加动画与过渡效果，让效果的变换更具流线性、平滑性。
..............
2、CSS3私有前缀
2.1 什么是私有前缀
如下代码中的 -webkit- 就是私有前缀
div {
width : 400px ;
height : 400px ;
-webkit- border-radius : 20px ;
}
2.2 为什么要有私有前缀
W3C 标准提出的某个CSS特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该CSS特性，在浏览器正式支持该CSS特性后，就不需要私有前缀了。
举个例字：
-webkit-border-radius: 20px;
-moz- border-radius : 20px ;
-ms- border-radius : 20px ;
-o- border-radius : 20px ;
border-radius : 20px ;
查询CSS3兼容性的网站：https://caniuse.com/
2.3 常见浏览器私有前缀
- Chrome **浏览器：****-**webkit
- Safari **浏览器：****-**webkit
- Firefox **浏览器：****-**moz
- Edge 浏览器：****-webkit-
- 旧 Opera 浏览器： -o-
- 旧 IE 浏览器： -ms-
注意：
我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的 CSS3 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具，去帮我们添加私有前缀。
二、CSS3基本语法
1、CSS3新增长度单位
1）rem 根元素字体大小的倍数，只与根元素字体大小有关。
2）vw 视口宽度的百分之多少 10vw 就是视口宽度的 10%
3）vh 视口高度的百分之多少 10vh 就是视口高度的 10%
视口宽度其实就是指整个浏览器页面得高度和宽度，设置上面两个单位时，当浏览器页面放大或者缩小时，对应的元素也会跟着放大或者缩小，永远占相同的比例。在移动端用的比较多。
4） vamx 视口宽高中大的那个百分之多少。（了解即可）
5）vmin 视口宽高中小的那个的百分之多少。（了解即可）
2、CSS新增颜色设置方式
CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla ，由于之前已经详细讲解，此处略过。
3、CSS3新增选择器
CSS3新增的选择器有：动态伪类、目标伪类、语言伪类、UI伪类、否定伪类、伪元素；这些在CSS2中已经详细讲解，此处略过。
4、CSS3新增盒模型相关属性
4.1 box-sizing 怪异盒模型
使用box-sizing 属性可以设置盒模型的两种类型：
|-------------|-------------------------------------------------------------------------------------|
| 可选值 | 含义 |
| content-box | width 和 height 设置的是盒子内容区的大小。（默认值） |
| border-box | width 和 height 设置的是盒子总大小。（怪异盒模型） 就是不管你的padding 还有 border 的大侠，我盒子的模型就是固定了。（比较有用） |
4.2 resize 调整盒子大小
使用 resize 属性可以控制是否允许用户调节元素尺寸。
|------------|------------------|
| 值 | 含义 |
| none | 不允许用户调整元素大小。（默认） |
| both | 用户可以调节元素的宽度盒高度。 |
| horizontal | 用户可以调节元素的宽度。 |
| vertical | 用户可以调节元素的高度。 |
4.3 box-shadow 盒子阴影
使用 box-shadow 属性为盒子添加阴影。
语法：
box-shadow : h-shadow v-shadow blur spread color inset ;
各个值得含义：
|----------|--------------------|
| 值 | 含义 |
| h-shadow | 水平阴影得位置，必须填写，可以为负值 |
| v-shadow | 垂直阴影的位置，必须填写，可以为负值 |
| blur | 可选，模糊举例 |
| spread | 可选，阴影得外延值 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影改为内部阴影 |
默认值： box-shadow：none 表示没有阴影
示例：
/* 写两个值，含义：水平位置、垂直位置 */
box-shadow : 10px 10px ;
/* 写三个值，含义：水平位置、垂直位置、颜色 */
box-shadow : 10px 10px red ;
/* 写三个值，含义：水平位置、垂直位置、模糊值 */
box-shadow : 10px 10px 10px ;
/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow : 10px 10px 10px red ;
/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow : 10px 10px 10px 10px blue ;
/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow : 10px 10px 20px 3px blue inset ;
应用示例：鼠标放上去时，产生阴影，类似于被选中的效果。 小米官网。
4.4 opacity不透明度
opacity 属性能为整个元素添加透明效果，值是 0 到 1 之间得小数，0 是完全透明得，1 表示完全不透明。
opacity 与 rgba 的区别？
opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。
5、CSS3新增背景属性
5.1 background-origin
作用：设置背景图的原点
语法：
1、padding-box：从padding区域开始显示背景图像。--默认值
2、border-box：从border区域开始显示背景图像。
3、content-box：从content区域开始显示背景图像。
5.2 backgroud-clip
作用：设置背景图的向外裁剪区域。
语法：
1、border-box：从border区域开始向外剪裁背景。--默认值
2、padding-box：从padding区域开始向外裁剪背景。
3、content-box：从content 区域开始向外裁剪背景。
4、text：背景图只呈现在文字上。
注意：若值为text，那么backgroun-clip 要加上 -webkit- 前缀。
5.3 backgroud-size
作用：设置背景图的尺寸。
语法：
1、用长度值指定背景图片大小，不允许负值。
background-size: 300px 200px;
2、用百分比指定背景图片大小，不允许负值。
background-size : 100% 100% ;
3、auto：背景图片的真实大小。--默认值
4、contain：将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。
background-size: contain;
5、cover：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。--相对比较好的选择
background-size: cover;
5.4 backgorund 复合属性
语法：
background: color url repeat position / size origin clip
注意：
- origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面的是 origin ，后面的 clip 。
- size 的值必须写在 position 值的后面，并且用 / 分开。
5.5 多背景图
CSS3允许元素设置多个背景图片
/* 添加多个背景图 */
background : url ( ../images/bg-lt.png ) no-repeat ,
url ( ../images/bg-rt.png ) no-repeat right top ,
url ( ../images/bg-lb.png ) no-repeat left bottom ,
url ( ../images/bg-rb.png ) no-repeat right bottom ;
6、CSS3新增边框属性
6.1 边框圆角
在CSS3 中，使用border-radius 属性可以将盒子变成圆角。
同时设置四个角的圆角：
border-radius:10px;
分开设置每个角的圆角（几乎不用）：
|----------------------------|---------------------------------------------|
| 属性名 | 作用 |
| border-top-left-radius | 设置左上角圆角半径： 1、一个值是正圆半径， 2、两个值分别是椭圆的x半径，y半径。 |
| border-top-right-radius | 设置右上角半径： 1、一个值是正圆半径， 2、两个值分别是椭圆的 x 半径，y 半径。 |
| border-bottom-right-radius | 设置右下角圆角半径： 1、一个值是正圆半径， 2、两个值分别是椭圆的x半径、y半径 |
| border-bottom-left-radius | 设置左下角圆角半径： 1、一个值是正圆半径 2、两个值分别是椭圆的x半径、y半径。 |
分开设置每个角的圆角，综合写法（几乎不用）：
border-raidus : 左上角 x 右上角 x 右下角 x 左下角 x / 左上 y 右上 y 右下 y 左下 y
6.2 边框外轮廓（了解）
outline-width：外轮廓的宽度。
outline-color：外轮廓的颜色。
outline-style：外轮廓的风格。
none：无轮廓
dotted：点状轮廓
dashed：虚线轮廓
solid：实现轮廓
double：双线轮廓
outline-offset：设置外轮廓与边框的距离，政府之都可以设置。
**注意：**outline-offset 不是 outline 的子属性，是一个独立的属性。
outline复合属性：
outline:50px solid blue;
7、CSS新增文本属性
7.1 文本阴影
在CSS3中，我们可以使用 text-shadow 属性给文本添加阴影。
语法：
text-shadow : h-shadow v-shadow blur color ;
|----------|-------------------|
| 值 | 描述 |
| h-shadow | 必须写，水平阴影的位置，允许负值。 |
| v-shadow | 必须写，垂直阴影的位置。允许负值。 |
| blur | 可选，模糊的距离。 |
| color | 可选，阴影的颜色 |
默认值：text-shadow:none 表示没有阴影。
7.2 文本换行
在CSS3中，我们可以使用 white-space 属性设置文本换行方式。
常用值如下：
|----------|-----------------------------------------|
| 值 | 含义 |
| normal | 文本超出边界自动换行，文本中的换行被浏览器识别为一个空格。（默认值） |
| pre | 原样输出，与pre标签的效果相同 |
| pre-wrap | 在pre效果的基础上，超出元素边界自动换行。 |
| pre-line | 在pre效果的基础上，超过元素边界自动换行，且只识别文本中的换行，空格会忽略。 |
| nowrap | 强制不换行 |
7.3 文本溢出
在CSS3中，我们可以使用 text-overflow 属性设置文本内容溢出时的呈现模式。
常用值如下：
|----------|--------------------------|
| 值 | 含义 |
| clip | 当内联内容溢出时，将溢出部分裁切掉。（默认值） |
| ellipsis | 当内联内容溢出块容器时，将溢出部门替换为...。 |
注意：要使得 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible
值， white - space 为 nowrap 值。
7.4 文本修饰
CSS3升级了 text-decoration属性，让其变成里复合属性
text-decoration : text-decoration-line || text-decoration-style || text-decoration-color
子属性及其含义：
text- decoration - line 设置文本装饰线的位置
- none ： 指定文字无装饰 （默认值）
- underline ： 指定文字的装饰是下划线
- overline ： 指定文字的装饰是上划线
- line-through ： 指定文字的装饰是贯穿线
text - decoration - style 文本装饰线条的形状
- solid ： 实线 （默认）
- double ： 双线
- dotted ： 点状线条
- dashed ： 虚线
- wavy ： 波浪线
text- decoration - color 文本装饰线条的颜色
7.5 文本描边
注意：文字描边功能仅 webkit 内核浏览器支持。
- -webkit-text-stroke-width ：设置文字描边的宽度，写长度值。
- -webkit-text-stroke-color ：设置文字描边的颜色，写颜色值。
- -webkit-text-stroke ：复合属性，设置文字描边宽度和颜色。