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

2017-11-01 19:19

椰子皮

2123

CSS

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

渐变是css3的内容，是不是要考虑兼容呢？是不是要写前面的识别码？对滴，兼容一定要考虑，识别码还是要写的！

ms 代表ie内核识别码

moz 代表火狐内核识别码

webkit 代表谷歌内核识别码

o 代表欧朋opera内核识别码

**①：**上下线性渐变

复制代码

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

**②：**从左到右的线性渐变

复制代码

.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);
}

**③：**有角度的线性渐变

复制代码

.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%);
}

赏

支付宝微信

关注公众号获取更多内容