如何在HTML做出渐变？_随笔

1、HTML实现渐变

<!DOCTYPE html>

<html>

<head>

<style>

#week{

width: 600px

height: 600px

background: linear-gradient(red, yellow, blue)

border-radius: 300px

}

</style>

</head>

<body>

</div>

</body>

</html>

2、实现效果

1、打开html开发工具，新建一个html文件在html代码页面创建一个<div>并给这个标签添加一个类名linear：

2、然后为类设置样式。在title后面创建一个style标签，然后在这个标签里面设置linear类的高、渐变（linear-gradient）的样式，这里的第一个参数是设置渐变的方向，后面两个参数是起始颜色和终止颜色。设置好后去浏览器查看效果：

3、保存好html文件后使用浏览器查看效果。就会看到一个绿色到红色的渐变了。以上就是html中让背景颜色渐变的设置方法介绍：

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

如何在HTML做出渐变？