Degradado
gradiente linealgradiente lineal
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+)
where <side-or-corner> = [left | right] || [top | bottom]
and <color-stop> = <color> [ <percentage> | <length> ]?
CEl punto central del contenedor de gradiente de puntos Aes el ángulo entre Cla línea vertical que pasa por el punto y Cla línea de gradiente que pasa por el punto, este ángulo se llama ángulo de gradiente.
Este ángulo se puede definir de dos maneras:
- Utilice palabras clave:
to top,to bottom,to left,to right,to top right,to top leftyto bottom rightto bottom left - Utilice números de unidad para definir ángulos, como
45deg,1turnetc.
Si se omite la configuración del valor del ángulo, el valor predeterminado es to bottom(correspondiente a 180dego .5turn):
background-image: linear-gradient(white, red);
Otra cosa importante sobre el uso de la palabra clave corner es que depende del tamaño del contenedor de degradado, como to top right(u otras palabras clave corner).
Si desea un reddegradado blue, la dirección es hacia el elemento top right. Lógicamente, bluese debe formar una línea recta alrededor de la esquina superior derecha del elemento, y el degradado violeta en el medio, desde la esquina superior izquierda hasta la esquina inferior derecha. Como se muestra abajo:
background-image: linear-gradient(to top right, red, blue);
Si desea que su navegador funcione mejor, ¿por qué no puede especificar la posición de los colores secuencialmente en la línea de degradado? El hecho de que las posiciones de los puntos de color estén de acuerdo con las instrucciones esperadas no le impide operar en un orden no secuencial. Pero si el valor posterior es menor que el valor anterior, el navegador realizará automáticamente las correcciones correspondientes. Por ejemplo:
background-image: linear-gradient(80deg, red 30%, orange 10%, yellow 60%, blue 40%);
Comencemos con el primer color red, que está ubicado en la posición de la línea de degradado 30%, y el segundo color orangeen 10%la posición, pero esto es incorrecto, como se dijo anteriormente, el punto de parada del color es un incremento. En este momento, el navegador corregirá la posición del segundo color, que será la misma que la posición del color anterior y también se distribuirá en la 30%posición de la línea de degradado. Luego, el tercer color yellowse distribuye en la posición de la línea de degradado 60%, pero el cuarto color inmediatamente después blue, 40%el navegador también corregirá y establecerá su posición para que sea la misma que la posición del color anterior.
background-image: linear-gradient(80deg, red 30%, orange, blue 10%);
Por último, pero no menos importante, en el ejemplo anterior, el último color blueno está en la posición correcta, por lo que el navegador lo corregirá a la misma posición que el anterior, en cuyo caso no es el color adyacente, yellowni el Sí. orange, vuelve a la redposición del primer color. Por lo tanto, redtanto los bluecolores como se distribuyen en la línea de degradado 30%, por lo que los colores yellowy orangeno serán visibles.
gradiente-lineal-repetitivo gradiente lineal repetitivo
La función CSS repetición-lineal-gradiente() crea una imagen que consta de un degradado lineal repetido. Esta es una linear-gradientfunción similar y toma los mismos parámetros, pero repite el degradado en todas las direcciones para cubrir todo su contenedor.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
display: block;
width: 50%;
height: 80px;
border-color: #000000;
padding: 10px;
}
#grad1 {
background-image: repeating-linear-gradient(180deg,rgb(26,198,204),rgb(26,198,204) 7%, rgb(100,100,100) 10%);
}
#grad2 {
background-color: black;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 25px, rgba(255,255,255,1) 25px, rgba(255,255,255,1) 50px);
}
</style>
</head>
<body>
<ol>
<li>repeating gradient
<div id="grad1"></div>
</li>
<li>Zebra pattern
<div id="grad2"></div>
</li>
</ol>
</body>
</html>
gradiente radial gradiente radial
radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{
2}] [ at <position> ]? ,
| [ [ circle | ellipse ] ||<extent-keyword> ] [ at <position> ]? ,
| at <position> , <color-stop> [ , <color-stop> ]+)
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
<color-stop> = <color> [ <percentage> | <length> ]?
El gradiente radial de CSS3 es mucho más complicado que el gradiente lineal, y los parámetros de atributos también son numerosos y complicados. Los parámetros de atributo en la sintaxis de variable radial CSS3 se definen de la siguiente manera:
<position>: Se utiliza principalmente para definir la posición central del gradiente radial. Este valor es similar a la propiedad en CSS background-positiony se utiliza para determinar la posición central del degradado del elemento. Si se omite este parámetro, su valor predeterminado es "centro". Entre sus valores destacan principalmente los siguientes:
<length>: utilice el valor de longitud para especificar la abscisa u ordenada del centro del círculo de degradado radial. Puede ser negativo.<percentage>: utilice el porcentaje para especificar la abscisa o la ordenada del centro del círculo de degradado radial. Puede ser negativo.left: establece el valor de abscisa del centro del círculo de gradiente radial a la izquierda.center: Establezca el valor de abscisa u ordenada del centro del círculo de gradiente radial en el medio.right: establece el valor de abscisa del centro del círculo de gradiente radial a la derecha.top: establece el valor de ordenada cuya parte superior es el centro del círculo de degradado radial.bottom: establece el valor de ordenada cuyo fondo es el centro del círculo de gradiente radial.
<shape>: Se utiliza principalmente para definir la forma del degradado radial. Incluye principalmente dos valores "círculo" y "elipse":
circle: Si es igual<size>al<length>tamaño, entonces el degradado radial es un círculo, que se utiliza para especificar el degradado radial del círculo.ellipse: Si<size>y<length>no tienen el mismo tamaño, entonces el degradado radial es una elipse, que se utiliza para especificar un degradado radial elíptico.
<size>: Se utiliza principalmente para determinar el tamaño de la forma final del degradado radial. Si se omite, su valor predeterminado es "esquina más alejada". Se pueden establecer explícitamente algunas palabras clave, entre las que se incluyen principalmente:
closest-side: Especifique la longitud del radio del degradado radial desde el centro del círculo hasta el lado más cercano al centro del círculo;closest-corner: Especifique la longitud del radio del degradado radial desde el centro del círculo hasta el ángulo más cercano al centro del círculo;farthest-side: Especifique la longitud del radio del degradado radial desde el centro del círculo hasta el lado más alejado del centro del círculo;farthest-corner: Especifique la longitud del radio del gradiente radial desde el centro del círculo hasta el ángulo más alejado del centro del círculo;
Se puede establecer explícitamente si <shape>se establece en "círculo" o se omite . Significa que el valor de longitud se utiliza para especificar la longitud del diámetro horizontal o vertical del gradiente radial, y la forma del gradiente radial se determina como un círculo o una elipse según los diámetros horizontal y vertical. Este valor no puede ser negativo.<size><length>
Se puede establecer explícitamente si <shape>se establece u omite "elipse" . Se utiliza principalmente para establecer el tamaño de la elipse. El primer valor representa el radio horizontal de la elipse y el segundo valor representa el radio vertical. Estos dos valores se pueden utilizar para definir los dos tamaños de radio además del tamaño definido. Los valores definidos utilizando son relativos a las dimensiones del contenedor de gradiente radial. Tampoco puede ser negativo.<size>［<length>|<percentage>］<length><percentage><percentage>
<color-stop>: Detiene el color en la línea de degradado radial, similar al degradado lineal <color-stop>. Degradado radial significa que la línea de gradiente se extiende desde el punto central hacia la derecha. 0% representa el punto inicial de la línea de gradiente y 100% representa la posición final de la línea de gradiente que cruza el contenedor de gradiente. Y su parada de color se puede definir con un valor negativo.
Aunque el gradiente radial es más complicado que el gradiente lineal, siempre que comprenda su sintaxis básica y el papel de los parámetros de atributos relacionados, no creo que le lleve demasiado tiempo adaptarse. A continuación, fortaleceremos el uso de gradientes radiales mediante el combate real. Todos los ejemplos siguientes se implementan en un contenedor con un ancho de 400 píxeles y un alto de 300 píxeles.
Primero veamos el degradado radial más simple: el centro del círculo está en el medio del contenedor, desde el color "hsla(120,70%,60%,.9)" hasta el color "hsla(360,60% ,60%,.9)" "El color implementa un degradado radial:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(rgb(220, 75, 200),rgb(0, 0, 75));
}
Si desea hacer un degradado circular en lugar de un degradado elíptico, solo necesita agregar la palabra clave "círculo". Nosotros agregamos la palabra clave "círculo" según el ejemplo anterior:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(circle,rgb(220, 75, 200),rgb(0, 0, 75));
}
Un degradado circular es un degradado elíptico especial donde los radios horizontal y vertical tienen el mismo valor de longitud.
Dado que los gradientes circulares son un caso especial de gradientes elípticos, si el radio primario (radio horizontal) y el radio secundario (radio vertical) de nuestro gradiente son diferentes, será un gradiente elíptico.
Como se mencionó anteriormente, cuando el radio mayor y el radio menor no son iguales, el gradiente radial producido es un gradiente elíptico. Al hacer un gradiente elíptico, puede usar la palabra clave "elipse":
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(ellipse,rgb(220, 75, 200),rgb(0, 0, 75));
}
Además de usar palabras clave para crear diferentes gradientes radiales, también puede usar diferentes parámetros de gradiente para crear efectos de gradiente radial. La forma del gradiente radial se determina haciendo círculos concéntricos, radio mayor y radio menor. Por ejemplo, la posición central del círculo es "200px, 150px", el radio principal es 50px, el radio secundario es 150px y el color es de "rgb(220, 75, 200)" a "rgb(0, 0, 75)". Degradado:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(50px 150px at 200px 150px,rgb(220, 75, 200),rgb(0, 0, 75));
}
A continuación, echemos un vistazo al efecto de degradado que se logra cuando el centro del círculo es el mismo y los radios interior y exterior son del mismo tamaño:
div {
width: 400px;
height: 300px;
margin: 50px auto;
border: 5px solid rgba(238,67,89,.8);
background-image: radial-gradient(200px 200px at 200px 150px,rgb(220, 75, 200),rgb(0, 0, 75));
}
En el siguiente ejemplo, definimos el centro del círculo en "al 50% 75%", lo que demuestra que "el lado más cercano", la "esquina más cercana", el "lado más lejano" y la "esquina más alejada" están respectivamente en el círculo Efecto con degradado radial elíptico.
/* closest-side*/
.closest-side .circle {
background-image: radial-gradient(closest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-side .ellipse {
background-image: radial-gradient(closest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* closest-corner*/
.closest-corner .circle {
background-image: radial-gradient(closest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.closest-corner .ellipse {
background-image: radial-gradient(closest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-side */
.farthest-side .circle {
background-image: radial-gradient(farthest-side circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-side .ellipse {
background-image: radial-gradient(farthest-side ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
/* farthest-corner */
.farthest-corner .circle {
background-image: radial-gradient(farthest-corner circle at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
.farthest-corner .ellipse {
background-image: radial-gradient(farthest-corner ellipse at 50% 75%, rgb(220, 75, 200),rgb(0, 0, 75));
}
gradiente-radial-repetitivo gradiente radial repetitivo
La función CSS repetición-radial-gradiente() crea un gráfico que consta de gradientes repetidos que irradian desde el origen. Es similar radial-gradienty toma los mismos parámetros, pero repite el color en todas direcciones, cubriendo todo su contenedor.
div {
width: 400px;
height: 300px;
margin: 20px auto;
background-image: repeating-radial-gradient(red,green 40px, orange 80px);
}
gradiente cónico gradiente de cono
{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red, orange, yellow, green, teal, blue, purple);
}
{
width: 200px;
height: 200px;
background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
border: 1px solid #000;
}
Color
color
Descripción de la propiedad: establece u obtiene el color del texto del objeto
Cambio de versión: No
Plantilla de gramática:
color：<color>
Predeterminado:user agent determinado por
Descripción del valor de la propiedad:
<color>：指定颜色;
Elementos aplicables: todos los elementos
¿Es heredable? Sí
¿Está animado? Sí
Interfaz de guión: color
Precauciones:
- Puede utilizar
Color Name(nombre del color),HEX,RGB,RGBA,HSL,HSLA,transparentpara especificarcolor colorEs posible que algunos navegadores no acepten especificar nombres de colores
opacidad@3
Descripción de la propiedad: establece u obtiene la opacidad del objeto
Plantilla de gramática:
opacity：<number>
valor por defecto:
Descripción del valor de la propiedad:
<number>：使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值;
Elementos aplicables: todos los elementos
¿Es heredable? No
¿Está animado? Sí
Interfaz de guión: opacity
Nota: Si el elemento define un valor menor que 1 1, opacityse generará un contexto de apilamiento local.
color transparente
background: transparent;