1.边框的简写
border-color: 颜色
border-style:样式**solid**/dotted(点点)/dushed(短线)/double(双实线)
border-宽度
简写:**border:color style width**
最简写方式:**border:style**
<br>
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