repetir-radial-gradiente () Función con el Ejemplo en CSS

CSS | repitiendo-radial gradiente () la función : Aquí, vamos a aprender acerca de la función de repetición de -radial gradiente () con su sintaxis, ejemplos de CSS (Cascading Style Sheet).

Introducción:

de negociación y la implementación de las funciones de todos los días es el rasgo de un bien y desarrollador profesional. No se puede decir que eres un buen desarrollador, si usted no sabe nada acerca de las funciones en el desarrollo web. Las funciones son una parte indispensable de class desarrollo web crear varios sitios web o páginas web. Bueno, si usted no sabe acerca de las funciones, a continuación, el don & rsquo; t preocupación como artículos y contenidos como estos son siempre por ahí for su ayuda y referencia. Del mismo modo, al igual que todas las demás funciones, en este artículo, vamos a discutir una función muy interesante conocido como función de repetición-radial gradiente () en el CSS . Por lo tanto, sin mucha demora vamos a empezar a aprender sobre esta función.

Funciones siempre van a ayudarle a for creación de sitios web muy atractivas y elegantes o páginas web. Todo lo que tienes que hacer es aprender tantas funciones como sea posible y utilizarlos en sus códigos. Las funciones no sólo ayudan en la construcción de sitios web o páginas web atractivas sino que también ayuda en la optimización de su código como cuando va a empezar a utilizar las funciones, entonces se dará cuenta de que el número de líneas en sus códigos se reducirá en cierta medida. Por lo tanto, las funciones de ayuda para evitar códigos for letárgicos. Por lo tanto, tratar de aprender acerca de las funciones y su comportamiento. Ahora, vamos a empezar a hablar acerca de la función que estamos interesados ​​en la función, la repetición de -radial gradiente () en el CSS .

Definición:

La función repitiendo-radial-gradiente () no es difícil de entender y es muy fácil de implementar. Por lo tanto, veamos primero en la definición de repetir-radial () en CSS.

El repitiendo-radial () la función es más que una función incorporada long CSS. El propósito de esta función es establecer el gradiente radial como un tipo de imagen de fondo que se repite una y otra vez de.

Por lo tanto, se ve cómo esta función es tan interesante y cómo se comporta. Ahora, echemos un vistazo a la sintaxis de esta función de manera que podamos tener una idea mucho más clara de esta función.

Sintaxis:

    element{
background-image: repeating-radial-gradient(<shape> <size> at <position>, <color-stop-list>);
}

Echemos un vistazo a los valores utilizados en esta sintaxis,

  • & lt; Shape & gt; : Puede elegir formas como círculos y elipses de la pendiente. La forma for utilizado es una elipse cuando no se especifica.
  • & lt; Tamaño & gt; : Se utiliza para definir el tamaño del gradiente. Se necesitan cuatro posibles valores que son más lejana esquina, en el lado más cercano, más cercano esquina, y más alejada del lado más lejano, donde esquina es el valor default.
  • & lt; Posición & gt; : Se utiliza para definir la posición de la utilización de gradiente. Si no se especifica su posición, su valor es default centro. Se pueden utilizar los cargos como parte superior izquierda superior derecha etc.
  • & lt; color de ventanilla lista de & gt; : Se utiliza para almacenar la lista de valores de color seguido de su posición de parada opcional.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 700px;
background-image: repeating-radial-gradient(circle, pink, red 10%, yellow 20%);
font-size: 40px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div>This is Repeating-radial-gradient function() in CSS.</div>
</body>
</html>

salida

repeating-radial-gradient() Function with Example in CSS - 4

En el ejemplo anterior, tres colores se utilizan en la función repitiendo-radial-gradiente () .

Conclusión:

eso es todo amigos acerca de la función repitiendo-radial-gradiente () en CSS . Esperamos que este artículo ayudó a impartir algunos conocimientos default su experiencia de desarrollo web. Seguir adelante y empezar a jugar con esta función y crear sitios web atractivos y elegantes o páginas web.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *