Los bordes degradados no se admiten directamente mediante el uso de CSS. Hay dos métodos para crear bordes degradados que se enumeran a continuación:
Método 1: usar una imagen de borde con degradado: el borde se crea usando el tamaño y el color como transparente en la propiedad del borde. El degradado se utiliza para definir la propiedad border-image. Border-image-slice se establece en 1 para que un borde se muestre correctamente. Esta combinación de propiedades crea un borde degradado.
Sintaxis:
.border {
width: 400px;
border: 3px solid transparent;
border-image: linear-gradient(to right, green, lightgreen);
border-image-slice: 1;
padding: 25px;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Gradient Borders</title>
<style>
.border {
width: 400px;
border: 3px solid transparent;
border-image: linear-gradient(to right, green, lightgreen);
border-image-slice: 1;
padding: 25px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>Gradient Borders</b>
<div class="border">
GeeksforGeeks is a computer science portal with a huge
variety of well written and explained computer science
and programming articles, quizzes and interview questions.
</div>
</body>
</html>
Producción:
Método 2: establecer el fondo como un degradado y superponer el contenido con relleno: este método consiste en envolver el elemento en el que se mostrará el borde con un elemento con un fondo degradado normal. El contenido en el div adjunto se rellena por igual al ancho del color de fondo requerido del borde de la página. Esto simula un borde degradado.
Sintaxis:
.border {
width: 400px;
position: relative;
background: linear-gradient(to right, green, lightgreen);
padding: 3px;
}
.inner {
background: white;
padding: 25px;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Gradient Borders</title>
<style>
.border {
width: 400px;
position: relative;
background: linear-gradient(to right, green, lightgreen);
padding: 3px;
}
.inner {
background: white;
padding: 25px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>Gradient Borders</b>
<div class="border">
<div class="inner">
GeeksforGeeks is a computer science portal with
a huge variety of well written and explained
computer science and programming articles,
quizzes and interview questions.
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA