CSS3新增属性

选择器

nth-of-type（n）：指定某个标签，选取第几个

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

cursor：鼠标手性

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

背景

background-size: cover;  不变形，占满盒子，可能被裁剪

background-size: contain;  不变形，不一定占满盒子，不会被裁剪

background-clip:  背景裁切：背景颜色（border，padding，margin）

background-origin：  背景图片默认显示位置

border-image ：背景图片路径

box-shadow  设置元素阴影  box-shadow: h-shadow（水平阴影的位置） v-shadow（垂直阴影的位置） blur（模糊距离） spread（阴影的大小） color;

文本

文本换行 ：

word-break：break-all

word-wrap：break-word

溢出文本处理

单行文本：

white-space:nowrap  限制换行

overflow：hidden  盒子溢出隐藏

text-overflow: ellipsis; 文本超出省略号

多行文本

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

缺一不可

主流浏览器(内核)

Chrome(webkit/blink)    -webritl

IE(trident)  -ms-

Firefox(gecko)  -moz-

Safari(webkit)    -webkit-

Opera(persto)    -o-

渐变（background-image）

线性渐变 ：linear-gradient（）

径向渐变 ：radial-gradient（）

锥形渐变 ：conic-gradient（）

滤镜（filter）

亮度brightness(.5)

对比度contrast(2)

透明度opacity(.5)

灰度:grayscale(100%)

模糊blur(3px)

褐色filter:sepia(1)

饱和度saturate(2)

色相旋转hue-rotate(9odeg)

反色ilter:invert(1)

阴影 drop-shadow(5px 5px 5px #000）

服务器字体

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

css3动画样式

iconfont

gzip（gz）：压缩优化

动效（transition）

transition-property: all;  执行过渡过渡属性:all

transition-duration:1500ms;  持续时间:s,ms

transition-timing-function:ease;  时间函数（速度曲线）:关键字，贝塞尔曲线，阶跃 函数

ease-in：先慢后快

linear：匀速

transition-delay： ns/ms  延迟

变换（transform）

transform: translate(0,0);    ：平移

transform:rotate(45deg);      ：旋转

rotateX

rotateY

rotateZ

transform: scale(1）    ：放大

transform: skew ( 45deg);    ：倾斜

行类元素不可用

/设置变换基准点:旋转，缩放/transform-origin: left top;

/启动浏览器的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;

暂停