Los degradados de CSS3 le permiten mostrar transiciones suaves entre dos o más colores específicos. Anteriormente, tenías que usar imágenes para lograr estos efectos. Sin embargo, al usar gradientes CSS3, puede reducir los tiempos de descarga y el uso del ancho de banda. Además, los elementos con degradados se ven mejor cuando se acercan porque el navegador genera el degradado.
CSS3 define dos tipos de gradientes:
- Gradientes lineales: direcciones abajo/arriba/izquierda/derecha/diagonal
- Gradientes radiales - definidos por sus centros
1. Gradiente lineal
Para crear un degradado lineal, debe definir al menos dos nodos de color. El nodo de color es el color que desea tener una transición suave. Al mismo tiempo, también puede establecer un punto de partida y una dirección (o un ángulo).
gramática:
imagen de fondo: degradado lineal (dirección, color-stop1, color-stop2, ...);
1.1, degradado lineal: de arriba a abajo (por defecto)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-渐变从上到下</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(#e66465, #9198e5);
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>
1.2, degradado lineal - de izquierda a derecha
Un degradado lineal a partir de la izquierda. Ejemplo donde el punto de partida es rojo y cambia lentamente a amarillo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-渐变从左到右</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到黄色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>
</body>
</html>
1.3 Gradiente Lineal - Diagonal
Puede hacer un degradado diagonal especificando posiciones de inicio horizontales y verticales.
El siguiente ejemplo muestra un degradado lineal que comienza desde la esquina superior izquierda (hacia la esquina inferior derecha). El punto de partida es rojo y cambia lentamente a amarillo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-渐变对角</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 不支持线性的时候显示 */
background-image: linear-gradient(to bottom right, red , yellow);
}
</style>
</head>
<body>
<h3>线性渐变 - 对角</h3>
<p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色：</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>
</body>
</html>
2. Usa múltiples nodos de color
#grad {
background-image: linear-gradient(red, yellow, green);
}Un degradado lineal de arriba a abajo con múltiples nodos de color:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-渐变多颜色</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
}
#grad2 {
height: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}
#grad3 {
height: 200px;
background-color: red; /* 浏览器不支持的时候显示 */
background-image: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>3 个颜色结点（均匀分布）</h3>
<div id="grad1"></div>
<h3>7 个颜色结点（均匀分布）</h3>
<div id="grad2"></div>
<h3>3 个颜色结点（不均匀分布）</h3>
<div id="grad3"></div>
<p><strong>注意：</strong> 当指定百分比时，颜色是不均匀分布。</p>
<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>
</body>
</html>
3. Usa la transparencia
Los degradados de CSS3 también admiten la transparencia, que se puede utilizar para crear efectos de desvanecimiento. Para agregar transparencia, usamos la función rgba() para definir los nodos de color. El último parámetro en la función rgba() puede ser un valor de 0 a 1, que define la transparencia del color: 0 significa completamente transparente, 1 significa completamente opaco.
El siguiente ejemplo muestra un gradiente lineal que comienza desde la izquierda. El punto de partida es completamente transparente y cambia lentamente a un rojo completamente opaco:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-渐变透明度</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h3>线性渐变 - 透明度</h3>
<p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。</p>
<div id="grad1"></div>
<p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持渐变。</p>
</body>
</html>
Gradiente repetido:
#grad {
/* 标准的语法 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
etc. . .