1.CSS3 概述
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际 面临的问题。
CSS3 在未来会按照模块化的方式去发展: www.w3.org/Style/CSS/c… CSS3 的新特性如下:
新增了 更加实用的选择器 ，例如:动态伪类选择器、目标伪类选择器、伪元素选择器等等。 新增了 更好的视觉效果 ，例如:圆角、阴影、渐变等。
新增了 丰富的背景效果 ，例如:支持多个背景图片，同时新增了若干个背景相关的属性。 新增了全新的布局方案 —— 弹性盒子。
新增了 Web 字体，可以显示用户电脑上没有安装的字体。
增强了颜色，例如: HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制 透明度。
增加了 2D 和 3D 变换，例如:旋转、扭曲、缩放、位移等。
增加 动画与过渡效果 ，让效果的变换更具流线性、平滑性。
......
- CSS3私有前缀 2.1 什么是私有前缀
如下代码中的 -webkit- 就是私有前缀
2.2 为什么要有私有前缀
W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，
使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS 特性后，就不需要私有前缀了。 举个例子:
div {
width:400px;
height:400px;
-webkit-border-radius: 20px;
}
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
查询 CSS3 兼容性的网站: caniuse.com/
2.3 常见浏览器私有前缀
浏览器: 浏览器:
浏览器: -moz- Edge 浏览器: -webkit-
旧 Opera 浏览器: -o- 旧 IE 浏览器: -ms-
注意: 我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因 为常用的 CSS3 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助 现代的构建工具，去帮我们添加私有前缀。
长度单位
-
px 像素
-
em 当与
font-size属性一起使用时，em继承其父元素的font-size大小： -
rem 根元素字体大小的倍数，只与根元素字体大小相关
-
vw viewport width 可以跟着屏幕宽度变化，移动端用的多
vh viewport height 可以跟着屏幕高度变化
-
vmax viewport 的宽和高中的大的那一个 vmin viewport 的宽和高中的小的那一个
盒子模型
盒子模型， boxsizing 默认是内容盒，contentBox, 盒子大小应该是内容盒 + padding + margin
可以设置成 borderBox，盒子内容的大小是 borderBox - padding - margin
resize
resize 可以调整盒子大小， 必须设置 overflow 才有效，为了设置盒子里面子元素的规则。 使用resize属性可以控制是否用户调节元素尺寸。
none 不允许用户调整元素大小。（默认） both 用户可以调节元素的宽度和高度 horizontal 用户可以调节元素的宽度 vertical 用户可以调节元素的高度
box-shadow
// 写两个值，含义：水平位置 垂直位置
box-shadow: 10px 10px;
//写三个值，含义：水平位置，垂直位置 阴影的颜色
box-shadow:10px 10px blue;
//写三个值，含义：水平位置，垂直位置，模糊程度(模糊的距离)
box-shadow:10px 10px 20px;
//写四个值，含义：水平位置 垂直位置 模糊程度 阴影颜色
box-shadow:10px 10px 20px blue;
//写五个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色
box-shadow: -10px -10px 20px 10px blue;
//写六个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影
box-shadow: 10px 10px 20px 10px blue inset;
box-shadow:none 表示没有阴影
box-shadow 设置四个方向
.test{
background: white;
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
box-shadow: 10px 0 0 red, -10px 0 0 green,
0 10px 0 orange, 0 -10px 0 blue;
}
opacity 不透明度
opacity属性能为整个元素添加透明程度，值是0-1之间的小数，0是完全透明，1表示完全不透明. opacity 与rgba的区别？ opacity是一个属性，设置的是整个元素（包块元素里面的内容）的不透明度 rgba是颜色的设置方式，用于设置颜色，他的透明度，仅仅是调整颜色的透明度。
CSS3 新增背景属性
注意上面的postion 可以写的 10px 10px 这种具体的，也可以写 left top right bottom 这种关键字。表示从基准位置的多少开始显示图片。
border-radius
div{
width: 400px;
height:400px;
border:2px solid black;
margin 0 auto;
border-radius:50%;
border-radius:200px;
//左上角的圆角半径
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-right-radius:20px;
border-bottom_left-radius:200px;
//左上角的水平和竖直的圆角半径
border-top-left-radius:100px 50px;
border-top-right-radius:50px 20px;
border-bottom-right-radius:20px 10px;
border-bottom_left-radius:10px 5px;
// 左上角x 右上角x 右下角x 左下角x/ 左上角y 右上角y 右下角y 左下角y
border-radius:100px 50px 20px 10px /50px 20px 10px 5px;
}
边框外轮廓
// 外轮廓的宽度
outline-width:20px;
//外轮廓的颜色
outline-color: orange;
//外轮廓的风格 none:无外轮廓 dotted:点状轮廓 dashed:虚线轮廓 solid:实线轮廓 double:上线轮廓
outline-style:solid;
// 设置外轮廓与边框的距离，正负值都可以设置。
outline-offset:30px;
//outline 复合属性
outline:20px solid orange;
文本阴影
设置四个方向的阴影
.test{
background: white;
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
text-shadow: 10px 0 0 red, -10px 0 0 green,
0 10px 0 orange, 0 -10px 0 blue;
}
文本换行
pre-line 里面填写的空格会忽略文本前后的空格会忽略，中间的空格不忽略。
显示一行，超出部分显示小圆点的做法：
li {
margin-bottom:10px;
overflow:hidden;
white-space:nowrap;
text-overflow:elipsis;
}
文本溢出
我们可以使用text-overflow属性设置文本内容溢出的呈现模式。
clip 当内联内容溢出时，将溢出部分裁减掉。 ellipsis 当内联内容溢出容器时，将溢出部分替换为 ...
注意:要使得text-overflow属性生效，块容器必须显示定义overflow为非visible值，white-space 为nowarp值。
文本修饰
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 文本装饰线条的颜色
文本描边
文本描边功能仅webkit 内核浏览器支持 -webkit-text-stroke-width:设置文字描边的宽度，写长度值 -webkit-text-stroke-color:设置文字描边的颜色，写颜色值 -webkit-text-stroke:符合属性，设置文字描边宽度和颜色
渐变
- 径向渐变
多个颜色之间的渐变，默认从圆心四散。（注意不一定是正圆，要看容器本身宽高比）
3.重复渐变
在没有发生渐变的地方重新开始渐变就是重复渐变。
重复线性渐变
background-image: repeating-linear-gradient(red 50px, yellow 100px, green);
重复径向渐变
background-image: repeating-radial-gradient(red 50px, yellow 100px, green);
无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。
使用 进行重复线性渐变，具体参数同 。 使用 进行重复径向渐变，具体参数同 。
我们可以利用渐变，做出很多有意思的效果:例如:横格纸、立体球等等。
web字体
-
基本使用
-
定制字体
3.字体图标
2D变换
过渡
在线制作贝赛尔曲线: cubic-bezier.com
伸缩盒模型
伸缩盒子的高度是可以被里面的伸缩项目撑开的。高度能够自动适应。
响应式布局
完整列表请参考: developer.mozilla.org/zh-CN/docs/…
