渐变：
通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果
渐变是图片，通过 background-image设置
CSS 定义了两种渐变类型：
- 线性渐变（向下/向上/向左/向右/对角线）
- 径向渐变（由其中心定义）
linear-gradient(位置,颜色,颜色)，线性渐变，颜色沿着一条直线发生变化
<style>
.box1 {
width: 200px;
height: 200px;
background-image:linear-gradient(red 10%,yellow,green,orange) ;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
线性渐变-从上到下
.box1 {
width: 400px;
height: 200px;
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
线性渐变 - 从左到右
<style>
.box1 {
width: 400px;
height: 200px;
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
线性渐变 - 对角线
从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色：
<style>
.box1 {
width: 400px;
height: 200px;
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
