css新特性
1.border-radius：设置圆角边框效果
（1）格式1
border-radius：值，四个角相同
border-radius：值1（左上、右下）值2（右上、左下）
border-radius：值1（左上） 值2（右上、左下）值3（右下）
border-radius：值1（左上） 值2（右上） 值3（右下） 值4（左下）
（2）格式2
border-top-left-radius：左上角
border-top-right-radius：右上角
border-bottom-right-radius：右下角
border-bottom-left-radius：左下角
2.text-shadow：设置文本阴影效果
（1）格式1：text-shadow：水平位移值垂直位移值阴影半径阴影颜色
（2）格式2：text-shadow：水平位移值垂直位移值阴影半径阴影颜色，水平位移值垂直位移值阴影半径阴影颜色；
3.box-shadow：设置盒子阴影效果
（1）格式1：box -shadow：inset 水平位移值垂直位移值阴影半径阴影外扩阴影颜色
（2）格式2：box -shadow：水平位移值垂直位移值阴影半径阴影外扩阴影颜色，水平位移值垂直位移值阴影半径阴影外扩阴影颜色；
4.border-image：用图像作为元素的边框
（1）border-image-source：设置图像地址，格式为border-image-source：url(图像地址路径)
（2）border-image-slice：设置图像的切割方式，采用九宫格的模式切割图像，格式border-image-slice：值，注意值没有单位
（3）border-image-width：设置图像边框的宽度，该宽度可以和切割方式的值相同，值的顺序也是上、右、下、左
（4）border-image-outset：设置图像边框外扩效果，属性值值为像素值，顺序为上、右、下、左
（5）border-image-repeat：设置边框中间部分的平铺方式，值为stretch（拉伸）、repeat（平铺，会有不完整图像）、round（平铺，没有不完整图像）
（6）border-image属性的使用：source slice fill/width/outset repeat
5.background-image：可以利用该属性设置多个背景图，格式：background-image：url()，url();，注意如果要调节多个背景图的显示效果可以有两种写法
（1）方法1：分别对背景图做修饰，使用background-repeat、background-position
（2）方法2：background：图一的显示方式，图二的显示方式；
6.background-size：调节背景图的尺寸，属性值为像素值、百分比、contain、cover，注意事项：在使用像素值或百分比时，如果只写一个值，那么图像在等比例缩放，此时的这个值代表的是宽度。contain的作用是使背景放大，当背景的某一条边和容器的边框重合则停止放大，可能会出现容器铺不满的现象。cover的作用是将背景图放大，当容器被全部铺满时停止放大，此时会出现背景图溢出现象
7.background-origin：设置背景图的起始位置，属性值为
（1）padding-box：默认，从padding下方开始显示背景图
（2）border-box：从边框下方开始显示背景图
（3）content-box：从内容下方开始显示背景图
8.background-clip：设置背景图的剪切方式，属性值为
（1）padding-box：保留从padding到内容的背景图，之外的背景图裁切掉
（2）border-box：保留从border到padding到内容的背景图，边框之外的背景图裁切掉
（3）content-box：保留内容下方的背景图，内容以外的背景图裁切掉
9.渐变色：线性渐变、径向渐变
（1）线性渐变：background-image：linear-gradient（to 方向，颜色1 范围，颜色2 范围…）；，
注意事项：:方向可以使用关键字：top、bottom、left、right
也可以使用角度值，格式为background-image：linear-gradient(角度，颜色1，颜色2….)；
（2）径向渐变：background-image：radial-gradient（at 中心点，颜色1，颜色2）；
注意事项：中心点的表示方式可以是关键字：left top/right top/right bottom/left bottom，默认在元素的正中央中心点的另外一种表示方式——使用像素值表示位置，格式为background-image：radial-gradient(at水平位置垂直位置，颜色1，颜色2…)
10.opacity：设置元素的透明效果，注意事项如下
（1）opacity的属性值为0-1之间，如果是0，表示完全透明，如果是1表示不透明
（2）opacity的透明效果会被所有后代元素继承
（3）如果要修饰元素的边框，那么只能用rgba值，无法使用opacity
11.@font-face的使用：作用是向用户提供服务器端字体类型，格式
@font-face{
font-family：”myFont”;
src:url(“字体所在路径”);
}
div{
font-family：”myFont”;
}
12.transform：设置元素的变形效果，包含如下变形效果，移动、缩放、旋转、拉伸
（1）移动：需要结合translate函数
translateX：使元素沿X轴移动，格式transform：translateX（值）；注意：值如果是正数，表示向右移动，值如果是负数表示向左移动
translateY：使元素沿Y轴移动，格式transform：translateY（值）；注意：值如果是正数，表示向下移动，值如果是负数表示向上移动
translate复合属性的使用方式，格式transform：translate（值1，值2）；注意：值1表示沿X轴移动的距离，值2表示沿Y轴移动的距离，如果只写一个值，那么这个值代表沿X轴移动的效果
（2）缩放：需要结合scale函数
scaleX：设置宽度的缩放，格式transform：scaleX（值），值为数值表示倍数，如果是1，表示不缩放，如果小于1，表示缩小，如果大于1，表示放大
scaleY：设置高度的缩放，格式transform：scaleY（值），值为数值表示倍数，如果是1，表示不缩放，如果小于1，表示缩小，如果大于1，表示放大
scale的复合形式：transform：scale(宽度的缩放，高度的缩放)，如果只写一个值，那么这个值代表宽度和高度同时缩放的比例
（3）旋转：需要结合rotate函数
格式：transform：rotate（角度），如transform：rotate(45deg)，注意：如果角度值为正数，表示元素向右旋转，如果角度值为负数，表示元素向左旋转
（4）变形：需要结合skew函数
skewX：使元素沿x轴进行变形拉伸，格式：transform：skewX（角度）
skewY：使元素沿y轴进行变形拉伸，格式：transform：skewY（角度）
skew复合属性的使用格式为：transform：skew（沿X轴拉伸的角度，沿Y轴拉伸的角度），注意如果只写一个值，那么这个值表示沿X轴拉伸
（5）3D变形效果
（1）移动：translateZ（值），使元素沿着Z进行移动，如果值为整数，表示元素向你靠近（放大），如果值为负数，表示元素向原理你的方向移动（缩小），使用格式：transform：translateZ（值）。注意默认是没有Z轴的，所以如果需要体验3D效果，那么则需要手动创建Z轴，创建的方法是给元素所在的父元素加perspective属性，属性值为像素值
（2）旋转
rotateX：沿X轴旋转，格式：transform：rotateX（角度）
rotateY：沿Y轴旋转，格式：transform：rotateY（角度）
（6）transform-origin：该属性的作用是设置变形时的参考点，属性值的表示方式可以是关键字、像素值、百分比，关键字有：top、bottom、left、right、center，格式transform-origin：水平的值垂直的值；
13.transition：设置元素的过渡效果
（1）transition-property：设置元素身上哪些CSS属性可以有过渡效果，属性值all、none、CSS属性
all：表示该元素身上的所有CSS属性都可以设置过渡效果
none：表示该元素身上的所有CSS属性都不可以设置过渡效果
CSS属性：表示指定那些属性可以有过渡效果，如果有多个属性设置过渡效果，那么可以使用逗号将这些属性名分隔
（2）transition-duration：设置过渡所需时间，属性值为秒（如5s）或毫秒（5000ms），默认为0，表示没有过渡过程
（3）transition-timing-function：设置速度曲线（就是过渡状态），属性值如下
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
linear：规定以相同速度开始至结束的过渡效果
ease-in：规定以慢速开始的过渡效果
ease-out：规定以慢速结束的过渡效果
ease-in-out：规定以慢速开始和结束的过渡效果
transition-delay：设置过渡的延迟时间，属性值为秒或毫秒
transition的复合使用格式：transition：property duration timing-function delay;
