<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3渐变背景色</title> </head> <!-- 背景颜色线性渐变【linear-gradient】 语法： background:linear-gradient(起点，起点颜色，过度颜色【可选】，终点颜色)； 起点：top是从上到下，left是从左到右。如果定义成left top，那就是从左上角到右下角 过渡色：可以插入多个，表示多种颜色的渐变 --> <style> .linear-gradient{ width: 1000px; margin:0 auto; text-align: center } .linear-gradient p{ width: 100px; height: 100px; float: left; border:1px #999 solid; line-height: 100px; margin-right: 100px; font-size:20px; } .linear-gradient p:first-child{ background:-webkit-linear-gradient(top,#09f,#fff,#0c0); } .linear-gradient p:last-child{ background:-webkit-linear-gradient(20deg,#09f,#fff,#0c0); } </style> <body> <div class="linear-gradient"> <p>普通渐变</p> <p>角度渐变</p> </div> </body> </html>
