CSS se utiliza para crear varias formas y estilos con diferentes colores o degradados. En este artículo, aprenderemos a dibujar un círculo con un borde degradado.
Enfoque: vamos a crear dos div, uno es un div externo con la clase círculo_exterior y otro es un div interno con la clase círculo_interior . El div exterior contiene el círculo grande con color degradado y el div interior contiene un pequeño círculo blanco que actúa como un extremo interior del círculo creando un borde del círculo. El degradado lineal es una función CSS que vamos a utilizar para establecer un degradado lineal como imagen de fondo.
Sintaxis:
.class_name { background-image: linear-gradient(direction, color1, color2 }
Parámetros: esta función acepta tres parámetros, como se mencionó anteriormente y se describe a continuación:
- $direction: Especifica la dirección para mover el degradado.
- $color1: Especifica la primera parada de color.
- $color2: Especifica la parada del segundo color.
Programa: podemos usar la función de gradiente lineal para dibujar un círculo con un borde degradado como se indica a continuación:
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
.outer_circle {
position: relative;
margin: 50px;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ffffff;
}
.inner_circle {
background-image: linear-gradient(
to bottom, rgb(9, 112, 26) 0%,
rgb(21, 255, 0) 100%);
content: '';
position: absolute;
top: -20px;
bottom: -20px;
right: -20px;
left: -20px;
z-index: -1;
border-radius: inherit;
}
</style>
</head>
<body>
<div class="outer_circle">
<div class="inner_circle"></div>
</div>
</body>
</html>
Producción: