边框内容等

十二月二十一
1.边框
1.1圆角
border-radius圆角边框
1.2盒阴影
box-shadow
transparent透明
round平铺
stretch拉伸
1.3边界图片
border-image
2.圆角
2.1border-radius属性
2.2指定每个圆角

border-radius 15px 50px 30px 5px 左上角 右上角 右下角 左下角
15px 50px 30px 左上角 右上角和左下角 右下角
15px 50px 左上角和右下角 右上角和左下角
2.3椭圆边
相除
radius
color white
border-radius15px/50px
除的数越小 弧度越大
2.4圆形变角
使用圆角显示用户头像
background-repeat：no-repeat不重复

3.背景
3.1
background-image添加背景图片
3.2
background-size指定背景图像大小
指定大小相对于父元素宽度和高度的百分比大小

3.3
background-origin指定背景图像位置区域
content-box padding-box border-box区域内放置背景图.
3.4
background-clip
背景裁剪从指定位置开始绘制
border-box
content-box
padding-box

二。
1.过度 一个样式逐渐改变成另一种效果
1.1多项改变 
transition过渡效果
deg角度单位
transform使其变化
1.2 速度曲线
transition-yiming-function 规定过渡效果的速度曲线
ease规定缓慢开始加速
linear规定开始到结束相同速度过渡效果
ease-in缓慢开始效果
ease-out规定结束效果
ease-in-out开始和结束缓慢效果
cubic-bezier三个属性

transition-dealy规定过渡效果延迟（以秒针）

2.3简写属性
3.1什么是css动画
3.2@keyframes规则 动画在特定时间内逐渐从当前样式改变为新样式
使动画生效 必须将动画绑定某个元素

animation-duration需要多久时间完成动画
from to

3.3延迟动画
animation-delay 动画延迟时间
3.4animation-iteration-count指定动画应运行行数
3.5反向或者交替运行动画
 

`animation-direction` 属性指定是向前播放、向后播放还是交替播放动画。

animation-direction 属性可接受以下值：

- `normal` - 动画正常播放（向前）。默认值
- `reverse` - 动画以反方向播放（向后）
- `alternate` - 动画先向前播放，然后向后
- `alternate-reverse` - 动画先向后播放，然后向前
3.6 速度曲线

`animation-timing-function` 属性规定动画的速度曲线。

animation-timing-function 属性可接受以下值：

- `ease` - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
- `linear` - 规定从开始到结束的速度相同的动画
- `ease-in` - 规定慢速开始的动画
- `ease-out` - 规定慢速结束的动画
- `ease-in-out` - 指定开始和结束较慢的动画
- `cubic-bezier(*n*,*n*,*n*,*n*)` - 运行您在三次贝塞尔函数中定义自己的值

3.7 填充模式

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。`animation-fill-mode` 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值：

- `none` - 默认值。动画在执行之前或之后不会对元素应用任何样式。
- `forwards` - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
- `backwards` - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
- `both` - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。