css渐变背景,你只需要复制－粘贴

渐变的背景在平时经常会用到，手机端尤为常用。写个渐变颜色所占的空间可比插张图片要小得多了，前端工程师当然也要考虑用户体验啊！

渐变是css3的内容，是不是要考虑兼容呢？是不是要写前面的识别码？对滴，<span style="font-size: 14px; margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important;">兼容一定要考虑，</span>识别码</span>还是要写的！

 

 ms 代表ie内核识别码</span>

 moz 代表火狐内核识别码</span>

 webkit 代表谷歌内核识别码</span>

 o 代表欧朋opera内核识别码</span>

 

①：上下线性渐变</span>

.bg {
  background: -webkit-linear-gradient(green, yellow);
  background: -o-linear-gradient(green, yellow);
  background: -moz-linear-gradient(green, yellow);
  background: linear-gradient(green, yellow);
}

②：从左到右的线性渐变</span>

.bg {
  background: -webkit-linear-gradient(left, red , yellow);
  background: -o-linear-gradient(right, red, yellow);
  background: -moz-linear-gradient(right, red, yellow);
  background: linear-gradient(to right, red , yellow);
}

③：有角度的线性渐变</span>

.bg {
  background: -webkit-linear-gradient(45deg, greenyellow, dodgerblue);
  background: -o-linear-gradient(45deg, greenyellow, dodgerblue);
  background: -moz-linear-gradient(45deg, greenyellow, dodgerblue);
  background: linear-gradient(45deg, greenyellow, dodgerblue);
}

④：可调整颜色密度的径向渐变

.bg {
  background: -webkit-radial-gradient(#8b65a3 10%, #60117d 15%, #37084b 40%);
  background: -o-radial-gradient(#8b65a3 10%, #60117d 15%, #37084b 40%);
  background: -moz-radial-gradient(#8b65a3 10%, #60117d 15%, #37084b 40%);
  background: radial-gradient(#8b65a3 10%, #60117d 15%, #37084b 40%);
}