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;