1 边框的简写

border-color: 颜色
border-style:样式solid/dotted(点点)/dushed(短线)/double(双实线)
border-width:宽度
简写: border : color style width
最简写：border : style

2 边框阴影

box-shadow:0px 0px 0px 0px 000 inset/outset;
值1：h-shadow—-水平方向的阴影偏移（阴影左右移动）
值2：v-shadow—-垂直方向的阴影偏移（阴影上下移动）
值3：blur—-阴影模糊距离（越大越淡）
值4：cspread—-阴影尺寸（阴影大小）
值5：color—-阴影颜色，默认黑色
值6：内阴影或者外阴影（默认）
最简写：box-shadow : h-shadow v-shadow

3 背景

1) 背景颜色：background-color
2) 背景图片：background-image:url(图片路径)—-双引号可加可不加
3) 背景图片平铺：background-repeat:repeat(默认)/no-repeat/repeat-x/repeat-y
4) 背景图片定位：
background-position:
①px(v1-一起设置x，y轴；v1 v2 分别设置x轴y轴)；
②% 以高度为标准,也分x轴y轴；
③关键字：x轴（left/center/right）y轴（top/center/bottom）
5) 背景图片的尺寸：
background-size:
①v1 同时设置x，y轴，v1,v2分别设置；
②px/%；
③cover：覆盖，要求容器被全部填满，图片可能显示不全；
④contain：容器包含完整的图片，容器可能填不满
6) 背景图片固定：
background-attactment:
①scroll 默认值，背景图片跟随页面滚动条而滚动；
②fixed：固定，背景图片相对页面位置固定，不会随页面滚动条而滚动
简写：background:color image repeat attachment position
最简写：background：color/image

4 文本格式化

字号大小—-font-size:px/pt/em/rem
字体设置—-font-family:字体1,字体2;(找到字体库中有的第一个字体应用)
字体加粗—-font-weight:
①关键字:lighter/normal/bold/bolder;
②无单位100-1000(100的整倍数)
字体样式—-font-style:italic(斜体)/normal(正常)
大型小写字母—-font-variant:small-caps;
简写：font:style varient weight size family;
最简写：font:size family;

5 弹性布局

主轴方向和换行的简写
flex-flow:direction wrap;

6 转换

只能用伪类激活
两个css的值,在一段时间内平缓过渡的过程.
(1)transition-property:属性/all
支持过渡的属性:
①颜色属性
②大多数取值为具体数值的属性
③阴影属性
④转换属性
⑤visibility:(过渡结束后消失)
(2) 过渡时长 transition-duration:s/ms;
(3) 过渡的时间曲线函数 transition-timing-function:
匀速:linear
ease:默认值,慢速开始,中间加速,减速结束
(4) 过渡的延迟
transition-delay:s/ms
简写：transition:property duration timing-function delay;
最简写：transition:duration;

7 动画

让元素从一种样式,逐渐变化成其他样式
可以使用伪类触发,也可以使用f5刷新触发
1 关键帧
利用关键帧来控制动画的每一个状态.
2 使用
(1)声明动画
@keyframes 动画名称{
0%{样式1}
…
100%{样式}
}
注意:关键帧之间不能有分号;且0%可以用from代替,100%可以用to代替
(2)使用动画
在要调用的元素样式内
①animation-name:动画名称
②animation-duration:动画持续时间
③animation-timing-function:linear/ease/ease-in/ease-out/ease-in-out/(steps)—-时间曲线函数
④animation-delay:s/ms;—-动画延迟
(3)动画的特有属性
①动画的播放次数
animation-iteration-count:次数/infinite(无限)
②动画的播放顺序
animation-direction:normal(默认0-100)/reverse(反向)/alternate(轮流播放,奇数次正向播放,偶数次反向播放)
③设置动画之前的填充状态
animation-fill-mode:none(默认)/backwards(延迟时间内填充第一帧)/forwards(动画结束后,填充最后一帧)/both(前后都要)
④设置动画的播放状态
animation-play-state:paused(暂停)/running(播放)
简写：
animation:duration timing-function delay count direction
最简写：
animation:name duration