background:linear-gradient([position],color px......) 线性背景
还可以有一种写法：
background:-webkit-linear-gradient(to [position],color px) 不推荐这种写法
demo如下：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .app{ width: 300px; height: 300px; } /*linear-gradient([位置] , [开始点颜色 占用多少位置], [结束点颜色 过渡大小])*/ .app{ background: -webkit-linear-gradient( 135deg, transparent 100px, deeppink 0); background: -moz-linear-gradient( 135deg, red 0 , white 0); } </style> </head> <body> <div class="app"></div> </body> </html>
（效果如上）ps：有时候使用透明(transparent)会有意想不到的效果
原文：http://www.cnblogs.com/claireyu1219/p/6392361.html