margin 外边距 *
margin 属性值最多有4个
* ① 只写一个值：四个方向的margin均为这个值
* ② 写两个值：上 右两个值 下默认=上 右默认=左
* ③ 三个值： 上 右下三个值 左默认=右
* ④ 四个值 上 右 下 左 四个方向
* ⑤ 写三个值加 auto 控件居右显示
* margin: 50px 30px 20px auto;
* margin: 0px auto; 设置控件在父容器中水平居中*/
border
* 三个属性值 宽度width 样式style 颜色color
* 原则上：三个属性都需要手动指定
* */
padding 内边距
* 使用方式：同margin
* 注意：使用padding会将整个控件撑大，使用时需注意控件可视区域的实际大小
[box-shadow 盒子阴影]
* 1、六个属性值，空格分割：
* x轴阴影距离：(必选) 可正可负，正——右移 负——左移
* y轴阴影距离：(必选) 可正可负，正——下移 负——上移
* 阴影模糊半径：(可选) 只能为正，默认为0。数值越大，阴影越模糊
* 阴影扩展半径：(可选) 可正可负，默认为0。数值增大，阴影扩大。数值减小，阴影缩小
* 阴影颜色：(可选) 默认为黑色
* 内外阴影：(可选) 可选值：inset(内阴影) 默认为外阴影
[border-radius 圆角]
* 1、可以接受8个属性值： X轴(左上、右上、右下、左下)/Y轴
* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;
* 2、只写X轴时，Y轴默认等于X轴。只写左上角，默认=右下角。只写右上角，默认=左下角
* 例如：border-radius: 50px 0px ;
* =border-radius: 50px 0px 50px 0px;
* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;
*
* 3、只写一个数，默认8个值均相等。
[border-image 图片边框]
* 1、十个属性：
* ① 图片路径：url()
* ② 图片切片宽度：4个值，分别代表上、右、下、左，四条切线。通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角(不会进行任何拉伸)，四个边分别对应边框的四边(根据设置进行拉伸/平铺/铺满)。
* 写的时候，不能带px单位
* ③ 图片边框的宽度：4个值，分别代表上、右、下、左四条边框
* 写的时候，必须带px单位
* ④ 边框背景重复方式：stretch(拉伸)、round(铺满)、repeat(平铺)
* 【铺满和平铺区别】
* 平铺：会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；
* 铺满：会对四条边进行适当的拉伸压缩，确保可以正好显示完全。
*
* 2、属性值写法：border-image: ① ②/③px ④;
* 第②部分可以只写1个、2个、3个，判断方式同margin
* 常用变换：translate 平移
* scale 缩放
* rotate 定义旋转
* transform可同时进行多种变换，多种变换之间空格分割：
* 例如：transform: scale(1.8,3.0) translateY(0px) rotate();
* transform-origin： 定义变形起点。
* 可选值：left/center/right top/center/bottom
* 或者，直接写X Y轴坐标点。
* 例如：transform: rotate(180deg);
* transform-origin: right bottom;
* 表示，绕左下角，旋转180度。
/*.div1{
width: 300px;
height: 300px;
overflow: hidden;
}
.div1 img{
width: 300px;
height:300px;
}
.div1:hover img{
transform: scale(1.5,5.0) translate(0px,-30px) rotate(360deg);
transition: all 3s ease;
height: 100px;}*/
/*transition
* 1 参与过度的属性，可以单独指定某个CSS属性,也可以all或none
* 2 过渡开始到过渡完成的时间
* 3 过渡的样式函数 长选 esea
* 4 过渡开始前的延迟时间 可以省略
* 5 transition属性可以同时定义多个过渡效果 用逗号分开。*/
CSS动画的使用
* 1 声明一个动画
* @keyframes name{
* from{}
* to{}
* }
* 阶段：
* ① 每个阶段用百分比显示，从0%到100%
* ② 起止必须设置即0%到100%或者from和to
* 2在CSS选择其中，使用Animation动画属性，调用声明好的关键帧。
* Animation缩写顺序：
* Animation-name 动画名称(@keyframes 名称)
Animation-duration 动画持续时间
Animtaion-timing-function动画速度曲线 常选ease
Animtaion-delay 动画延迟时间
Animation-iteration-count 播放次数，默认为1，无限次Infinite
Animation-direction 设置对象动画在循环中是否反向运动 （ Alternate 逆向播放）
* animation-fill-mode 设置对象动画时间之外的状态（forwards： 停留在动画结束状态 backwards:停留在动画开始状态）
>>> 注意animation-name和animation-duration必须设置
>>> animation可以同时设置多个动画 动画之间用,分隔
animation:frame1 .3s,frame2 .5s…
*/