css3新特效

选择器

1. E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式

2. E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素

3. E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应

4. E：frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素

5. E：empty 选择没有子元素的每个E元素

6. E:target 选择当前活动的E元素

7. ::selection 选择被用户选取的元素部分

8. 属性选择器

9. E[abc*=“def”] 选择adc属性值中包含子串"def"的所有元素

10. nth-child（n） ：指定摸个标签，选取标签所在的位置

11. cursor：鼠标手性

12. ：nth-child /：：selection ： 文本选中设置

背景

1. background-size: cover; 不变形，占满盒子，可能被裁剪
2. background-size: contain; 不变形，不一定占满盒子，不会被裁剪
3. background-clip: 背景裁切：背景颜色（border，padding，margin）
4. background-origin： 背景图片默认显示位置
5. border-image ：背景图片路径
6. box-shadow 设置元素阴影 box-shadow: h-shadow（水平阴影的位置） v-shadow（垂直阴影的位置） blur（模糊距离） spread（阴影的大小） color;

文本

1. text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色
2. text-overflow:规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)
3. text-wrap:规定文本换行的规则
4. word-break 规定非中日韩文本的换行规则
5. word-wrap 对长的不可分割的单词进行分割并换行到下一行
6. white-space: 规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行

多行文本

-webkit-line-clamp:2;（行数）display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;

缺一不可

主流浏览器(内核)

1. Chrome(webkit/blink) -webritl
2. IE(trident) -ms-
3. Firefox(gecko) -moz-
4. Safari(webkit) -webkit-
5. Opera(persto) -o-

渐变（background-image）

线性渐变 ：linear-gradient（）

径向渐变 ：radial-gradient（）

锥形渐变 ：conic-gradient（）

background-image:linear-gradient(90deg,yellow 20%,green 80%)

过渡（transition）

transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔

transition-duration:2s; //过渡持续的时间

transition-timing-function:ease;

transition-delay:5s //过渡延迟5s进行

滤镜（filter）

1. 亮度brightness(.5)
2. 对比度contrast(2)
3. 透明度opacity(.5)
4. 灰度:grayscale(100%)
5. 模糊blur(3px)
6. 褐色filter:sepia(1)
7. 饱和度saturate(2)
8. 色相旋转hue-rotate(9odeg)
9. 反色ilter:invert(1)
10. 阴影 drop-shadow(5px 5px 5px #000）

服务器字体

@font-face{ font-family：‘自己定义一个名字’ src：url（‘ ’）//字体路径}

css3动画样式

iconfont

gzip（gz）：压缩优化

动效（transition）

1. transition-property: all; 执行过渡过渡属性:all
2. transition-duration:1500ms; 持续时间:s,ms
3. transition-timing-function:ease; 时间函数（速度曲线）:关键字，贝塞尔曲线，阶跃 函数
4. ease-in：先慢后快
5. linear：匀速
6. transition-delay： ns/ms 延迟
7. 变换（transform）
8. transform: translate(0,0); ：平移
9. transform:rotate(45deg); ：旋转
10. rotateX
11. rotateY
12. rotateZ
13. transform: scale(1） ：放大
14. transform: skew ( 45deg); ：倾斜
15. 行类元素不可用
16. /设置变换基准点:旋转，缩放/transform-origin: left top;
17. /启动浏览器的3D渲染/transform-style: preserve-3d;

动画

@keyframes

声明动画

/奇数反向，偶数反向正向执行/animation-direction: alternate-reverse;

animation-direction: alternate;/奇数正向，偶数反向执行/

/┌动画结束后停留状态：forwards（停留在动画结束位置/animation-fill-mode:forwardsl:

animation-play-state: running;

继续执行

animation-play-state:paused;

暂停