Luego de buscar en diversos repositorios y sitios webs al final descubrimos la respuesta que te mostramos pronto.
Solución:
También podrías usar box-shadow propiedad con mayor valor de desenfoque y rgba() color para establecer el nivel de opacidad. Suena como una mejor opción en su caso.
box-shadow: 0 30px 40px rgba(0,0,0,.1);
Puede especificar degradados para los colores en determinadas circunstancias en CSS3 y, por supuesto, los bordes se pueden establecer en un color, por lo que debería poder utilizar un degradado como color de borde. Esto incluiría la opción de especificar un color transparente, lo que significa que debería poder lograr el efecto que está buscando.
Sin embargo, nunca lo he visto en uso, y no sé qué tan bien soportado por los navegadores actuales. Sin duda, deberá aceptar que al menos algunos de sus usuarios no podrán verlo.
Un rápido google apareció estas dos páginas que deberían ayudarlo en su camino:
- Bordes de degradado CSS3
- http://designshack.co.uk/tutorials/introduction-to-css3-part-2-borders
Espero que ayude.
Cómo desvanecer los bordes con CSS:
Disculpe los estilos en línea por el bien de la demostración. La propiedad 1 para border-image es border-image-slice, y en este caso define el borde como una única región continua.
Fuente: Bordes de degradado
Aquí puedes ver las comentarios y valoraciones de los usuarios
Nos puedes confirmar nuestro trabajo añadiendo un comentario y valorándolo te damos las gracias.