Cómo hacer bordes degradados en CSS
Estoy intentando aplicar un degradado a un borde, pensé que era tan simple como hacer esto:
border-color: -moz-linear-gradient(top, #555555, #111111);
Pero esto no funciona.
¿Alguien sabe cuál es la forma correcta de hacer degradados de bordes?
Aceptado
La border-imagepropiedad puede lograr esto. Deberá especificar border-styley border-widthtambién.
border-image: linear-gradient(#f6b73c, #4d9f0c) 30;
border-width: 4px;
border-style: solid;
Lea más en MDN .
En lugar de bordes, usaría degradados de fondo y relleno. Mismo look, pero mucho más fácil.
Un ejemplo sencillo:
.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}
.g > div { background: #fff; }<div class="g">
<div>bla</div>
</div>Expandir fragmento
También puedes aprovechar el ::beforeselector como señaló Walter Schwarz:
body {
padding: 20px;
}
.circle {
width: 100%;
height: 200px;
background: linear-gradient(to top, #3acfd5 0%, #3a4ed5 100%);
border-radius: 100%;
position: relative;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.circle::before {
border-radius: 100%;
content: '';
background-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
position: absolute;
z-index:-1;
}<div class="circle"></div>Expandir fragmento
border-image-sliceextenderá un gradiente de imagen de borde CSS
Esto (según tengo entendido) evita la división predeterminada de la "imagen" en secciones; sin ella, no aparece nada si el borde está en un solo lado, y si está alrededor de todo el elemento, aparecen cuatro pequeños degradados en cada esquina.
body{
border: 16px solid transparent;
border-image: linear-gradient(45deg, red , yellow);
border-image-slice: 1;
height: 120px;
border-radius: 10px; /* will have no effect */
}Expandir fragmento
