border-radius ：圆

  • value: 百分比 像素
  • 两个值： 1：左上和右下 2：左下和右上
  • 四个值： 左上—>右上—>右下—>左下

**

box-sizing : 怪异盒模型

  • border-box :从边框开始算
  • content-box : 从内容开始计算；

**

box-shadow ：阴影

  • 向右偏移 向下 模糊度 大小 颜色 内阴影
  • inset 内阴影

**

background-size ：背景图大小

  • background-size : **contain : 能够展示全部图片，并且按照最小的适应；**
  • background-size : cover : 按照盒子最大的边长去适应，图片有可能展示不全；
  • background-size : 100% 100% : 让图片完全适应盒子的宽和高，但是可能导致图片变形；

**

background-clip ：裁剪

  • background-clip : ** border-box;超出border的部分被裁减**
  • background-clip : **content-box:超出内容区就裁减**

**

background:linear-gradient(） 渐变色

  • background**:linear-gradient(to left,red,blue,yellow) 角度(可以直接写deg) 颜色**

**

transform 转换（动画）

  • transform : **translate : 平移 **translate(X,Y);X正是右平移，Y为正向下平移；
    • transform:translate(100px,100px) **
  • transform : **scale:参数是缩放的倍数； 默认按照盒子的中心点缩放 **
    • transform:scale(0.5)**
  • transform : **rotate(角度) ： 默认以盒子的中心点旋转，如果角度大于0；是顺时针旋转，小于0就是逆时针旋转； **
    • transform: rotate(45deg);**
  • transform-origin : 改变旋转中心点； ** **
    • transform-origin: left top;**
  • skew : 默认以中心点变形 角度如果是正，是逆时针的变形，为负时，是顺时针变形；** **
    • transform: skew(30deg);**
  • transform-style 指定嵌套元素是怎样在三维空间中呈现 默认值为flat
    • transform-style : flat 表示所有子元素在2D平面呈现
    • transform-style : preserve-3d 表示所有子元素在3D空间中呈现

**

transition 设置当前元素的过渡效果

transition: **property duration timing-function delay**; 具有动画属性的元素 时间 运动的效果 动画延迟的时间

  • transition-delay : 2s; 动画在延迟两秒之后开始运动，默认值为0
  • transition-duration : 2s; 动画在2s中完成，默认值为0
  • transition-property : all 全部元素都具有动画的属性 默认值为all
    • transition-property : none 没有元素具有动画的属性
    • transition-property : property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
  • transition-timing-function 设置的是动画运动的速度 默认是ease
    • transition-timing-function : linear 规定以相同速度开始至结束的过渡效果
    • transition-timing-function : ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
    • transition-timing-function : ease-in 规定以慢速开始的过渡效果
    • transition-timing-function : ease-out 规定以慢速结束的过渡效果
    • transition-timing-function : ease-in-out 规定以慢速开始和结束的过渡效果


animation

  • animation-name 指定要绑定到选择器的关键帧的名称
  • animation-duration 动画指定需要多少秒或毫秒完成
  • animation-timing-function 设置动画将如何完成一个周期
  • animation-delay 设置动画在启动前的延迟间隔。
  • 动画执行的次数：animation-iteration-count ，可以是具体的数字，比如3代表就是执行3次；还可以设置成无限循环 infinite;
  • 设置动画的状态：animation-fill-mode；
  • forwards:当动画结束，停留在最后一帧
  • backwards:在动画中有延迟的时候，设置backwards，会迅速的跑到第一桢开始执行动画
  • both:当设置的有延迟的时候，动画迅速以第一桢开始，当动画结束的时候，停留在最后一帧。

perspective 多少像素的3D元素是从视图的perspective属性定义

  • perspective : 3000px 元素距离视图的距离，以像素计
  • perspective : none 默认值。与0相同。不设置透视