选择器
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;
暂停