CSS3背景色:gradient(渐变)

gradient(渐变)

生成渐变颜色的背景图片

CSS3渐变分为linear-gradient(线性渐变)和radial-gradient(径向渐变)

linear-gradient(线性渐变)

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴

background-image:　linear-gradient(方向，　颜色，　颜色，．．);

border: 1rpx solid #000;
  /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); */
  background: linear-gradient(0deg,#fff 70%,rgba(255,255,255,0));

 

第一个参数为渐变的方向，　取值为角度（如45deg）或方向关键字(top, bottom等)

• 0deg == top 顺时针
• 注意: 几个浏览器实现前缀，在旧稿的规格中 0deg 是指右部而不是顶部。当是混合前缀和标准线性渐变时要特别注意角度的值。一个简单的公式：90 - x = y，x 是标准用法，而 y是非标准，浏览器引擎前缀用法。

第二个参数开始是一个颜色列表, 表示起始点到结束点之间渐变颜色;每个颜色可以加入百分比表示颜色开始位置

background-image: linear-gradient(to top, blue, red); /*方向值为方向关键字*/
background-image: linear-gradient(45deg, blue, red); /*方向值为角度值*/
background-image: linear-gradient( 0deg, blue, green 40%, red );/*多个颜色, 颜色加入百分比*/

原文参考