响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例1-6 CSS3线性渐变

代码

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开发项目教程(HTML5+CSS3+Bootstrap)第2版 例1-6 CSS3线性渐变_第1张图片
渐变是两种或多种颜色之间的平滑过渡,渐变背景一直以来在Web页面中都是一种常见的视觉元素。CSS3的渐变属性主要包括线性渐变、径向渐变和重复渐变。CSS3中的线性渐变一般通过“ background-image: linear-gradient(参数值) ” 来实现。
(注:在CSS3以前,必须使用图像来实现这些效果)

你可能感兴趣的:(前端,html5,css3)