html中想要将背景颜色渐变怎么弄？_随笔

1、打开编辑器，新建一个HTML，并定义一个div，并给50px的高度：

2、接下来在style中设置div的样式，这里使用linear-gradient()编写一个默认方向的红蓝渐变，渐变的方向可以省略的：

3、如果想设置渐变方向为从右至左，只需要给linear-gradient加一个“to left”属性就可以了：

4、保存文件查看生成的指定方向的渐变，可以看到浏览器中显示出红蓝的渐变色。以上就是用在html中设置渐变色的步骤：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

.linear {

font-size:18px

font-weight:400

width:250px

height:40px

line-height:40px

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=##218ee1, endColorStr=#ffffff)/*IE*/

background:-moz-linear-gradient(left, #218ee1, #fafafa)/*火狐*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#15A216), to(#ffffff))/*谷歌*/

background-image: -webkit-gradient(linear, left bottom, left top, color-start(0, #218ee1), color-stop(1, #ffffff))/* Safari &Chrome*/

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#15A216', endColorstr='#fafafa')/*IE6 &IE7*/

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa')"/* IE8 */

}

</style>

</head>

<body>

<div class="linear">申请鉴定流程便捷</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

html中想要将背景颜色渐变怎么弄？