代码
<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8">
<title>CSS3线性渐变</title>
<style type="text/css">
.rainbow-linear-gradient {
width: 460px;
height: 160px;
background-image: linear-gradient(to right, #E50743 0%, #F9870F 15%, #E8ED30 30%, #3FA62E 45%, #3BB4D7 60%, #2F4D9E 75%, #71378A 80%);
}
</style>
</head>
<body>
<div class="rainbow-linear-gradient"></div>
</body>
</html>
上述代码中：
第10行代码中每个颜色值后面的百分数表示该色标的位置比例。
运行效果
渐变是两种或多种颜色之间的平滑过渡，渐变背景一直以来在Web页面中都是一种常见的视觉元素。CSS3的渐变属性主要包括线性渐变、径向渐变和重复渐变。CSS3中的线性渐变一般通过“ background-image: linear-gradient(参数值) ” 来实现。
(注：在CSS3以前，必须使用图像来实现这些效果）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
