如何在HTML做出渐变?

发布网友发布时间：2022-05-01 05:11

我来回答

共5个回答

热心网友时间：2022-05-11 08:18

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、实现效果

热心网友时间：2022-05-11 09:36

通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡，由于用到css3所以需要考虑下浏览器兼容问题，例如：
从左到右的线性渐变，且带有透明度的样式：
#grad {
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
其中rgba()中的4个数字，前3个为颜色rgb，最后1个是透明度，取值0-1，0为透明,1为不透明。

热心网友时间：2022-05-11 11:10

需要使用css实现。
css当中background可以使用渐变颜色，设置背景为linear-gradient，并给出必要的颜色参数就可以生成线性渐变了；设置背景为radial-gradient，并给出相应的参数，就可以生成径向渐变。

热心网友时间：2022-05-11 13:02

要用css3的属性