2021-04-04

1. opacity 属性设置元素的不透明级别

语法：opacity: value|inherit;

2. transform详解translate

translateX: X轴平移，填正数往右平移，填负数往左平移

translateY: Y轴平移，填正数往下平移，填负数往上平移

translateZ: Z轴平移

translate 是同时设置  translateX  和 translateY， 所以里面可以填两个参数， 第一个值 X  第二个 Y

translate3d 是同时设置  translateX  ，translateY 和 translateZ 所以里面可以填三个参数

3. transform 缩放：scale()

transform: scaleX(x);         /*沿X轴方向缩放*/

transform: scaleY(y);         /*沿Y轴方向缩放*/

transform: scale(x, y);        /*沿X轴和Y轴同时缩放*/

4. z-index 属性

z-index 属性指定一个元素的堆叠顺序

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

5. CSS - 线性渐变

background: linear-gradient(color1,color2); 
/*默认方向从上到下*/

• 设置渐变终点

  background: linear-gradient(direction,colro1,color2);
  /* direction即为设置渐变终点 （to ....) */
  /* 如，从左到右，就将direction写成to right */
  /* 如，左下角到右上角，将direction写成to right top */
  

• 设置渐变线起始角度

  background: linear-gradient(angle,color1,color2);
  /* angle即为角度。是以六点为起始，进行顺时针计算确定渐变的起始位置 */
  /* 如，左上角十点半，135度 */
  

• 设置多个颜色

  background: linear-gradient(color1,color2,color3,color4....)
  

• 设置颜色起始位置

    通过设置颜色的起始位置，可以设置颜色占比，也可以设置渐变重复，还可以设置渐变起始点
  

  background: linear-gradient(color1 length/percentage,color2 length/percentage,color3 length/percentage);
    /* length/percentage 都是颜色起止位置，length表示长度，percentage表示百分比 */
  

• 渐变透明

    使用 **rgba()** 函数来定义颜色 
  
    rbga(x,y,z,k) 其中，x,y,z三个数分别取值0-255。k取值0-1，0表示透明，1表示不透明