粘性布局

  1. postion: sticky
  2. top: 40px

垂直方向微调

  1. vertical-align:-5px

不透明度

  1. img {
  2.   opacity: 0.5;
  3. }

transform属性实现的4种功能（旋转、缩放、倾斜、移动）

  1. #旋转
  2. transform：rotate（45deg）；
  3. # 缩放
  4. transform：scale（0.5）；//缩小一半
  5. transform：scale（0.5，2）；//水平方向缩小一半，垂直方向放大一倍。
  6. # 倾斜
  7. transform：skew（30deg，30deg）；//水平方向上倾斜30度，垂直方向上倾斜30度。
  8. transform：skew（30deg）；// 水平倾斜 垂直不倾斜
  9. # 移动
  10. transform：translate（50px，50px）；// 水平方向上移动50px，垂直方向上移动50px
  11. transform：translate（50px）；// 水平移动 垂直不移动
  12. # 一个元素使用多种变形的方法
  13. transform：translate（150px，200px） rotate（45deg） scale（1.5）；

渐变色

  1. /* 从上到下，蓝色渐变到红色 */
  2. background-image: linear-gradient(blue, red);
  3. # 从左到右
  4. background-image: linear-gradient(to right, #3498db , #2ecc71);

元素水平垂直居中

  1. <div class="parent-frame" style="position: relative;">
  2. 利用绝对定位，配合translate移动到水平垂直居中。
  3. <div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">

鼠标进过变成手形

  1. cursor: pointer;