随着互联网的发展css功能也越来越强大了，你知道css如何设置背景渐变吗？css设置渐变只需使用：linear-gradient([设置方向]，[设置开始颜色]，[设置多种过度颜色，可设置也可以不设置]，[设置结束颜色])。案例：background-image:linear-gradient(50deg,#fff,#000);
方法/步骤
1、打开html开发工具，新建一个html文件。如图
2、在html代码页面创建一个<div>并给这个标签添加一个类如：linear。如图代码：<divclass="linear"></div>
3、为类设置样式。在<title>后面创建一个<style>标签，然后在这个标签里面设置linear类的高、渐变（linear-gradient）的样式。演示中设置的渐变黑白渐变。如图：代码：<styletype="text/css"> .linear{ background-image:linear-gradient(totop,#fff,#000); height:300px; } </style>
4、保存好html文件后使用浏览器查看效果。
5、所嘀芟苒疾有代码。可以直接复制所有代码到新建的html文件保存后使用浏览器打开即可看到效果。所有代码：<!DOCTYPEhtml><ht罪焐芡拂ml> <head> <metacharset="UTF-8"> <title>设置背景渐变</title> <styletype="text/css"> .linear{ background-image:linear-gradient(totop,#fff,#000); height:300px; } </style> </head> <body> <divclass="linear"></div> </body></html>
方法/步骤2
1、使用角度来设置渐变。方法基本上都是一样的，唯一不同需要把上面第三个步骤做一些修改。把background-image:linear-gradient(totop,#fff,#000);修改background-image:linear-gradient(0deg,#fff,#000);。如图：
2、保存好html文件后使用浏览器查看效果。
3、所嘀芟苒疾有代码。可以直接复制所有代码到新建的html文件保存后使用浏览器打开即可看到效果。所有代码：<!DOCTYPEhtml><ht罪焐芡拂ml> <head> <metacharset="UTF-8"> <title>设置背景渐变</title> <styletype="text/css"> .linear{ background-image:linear-gradient(0deg,#fff,#000); height:300px; } </style> </head> <body> <divclass="linear"></div> </body></html>
4、总结：背景渐变的方向可以使用英文也可以使用角度来实现。具体可看图片
