¿Es posible usar el radio del borde junto con una imagen de borde que tiene un degradado?

Estoy diseñando un campo de entrada que tiene un borde redondeado (radio de borde) e bash de agregar un degradado a dicho borde. Puedo hacer con éxito el degradado y el borde redondeado, sin embargo, ninguno de los dos funciona en conjunto. Está redondeado sin degradado o un borde con un degradado, pero no tiene esquinas redondeadas.

-webkit-border-radius: 5px; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%; 

¿Hay alguna forma de que las dos propiedades de CSS funcionen juntas, o esto no es posible?

Probablemente no sea posible, según la especificación W3C:

Los fondos de una caja, pero no su imagen de borde, se recortan a la curva apropiada (según lo determinado por ‘background-clip’). Otros efectos que se graban en el borde o borde de relleno (como ‘overflow’ que no sea ‘visible’) también deben ajustarse a la curva. El contenido de los elementos reemplazados siempre se recorta a la curva de borde de contenido. Además, el área fuera de la curva del límite no acepta eventos de mouse en nombre del elemento.

Esto es probable porque border-image puede tomar algunos patrones potencialmente complicados. Si desea un borde de imagen redondeado, tendrá que crear uno usted mismo.

Esto es posible, y no requiere marcado adicional , pero usa un ::after pseudo-elemento ::after .

captura de pantalla

Implica poner un pseudo-elemento con un fondo de degradado debajo y recortarlo. Esto funciona en todos los navegadores actuales sin prefijos o hacks de proveedores (incluso IE), pero si desea admitir versiones antiguas de IE, debe considerar las sustituciones de colores sólidos, javascript y / o extensiones MSIE CSS personalizadas (es decir, filter , CSSPie -como trucos de vectores, etc.).

Aquí hay un ejemplo en vivo ( versión jsfiddle ):

 @import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css'); html { /* just for showing that background doesn't need to be solid */ background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%); padding: 10px; } .grounded-radiants { position: relative; border: 4px solid transparent; border-radius: 16px; background: linear-gradient(orange, violet); background-clip: padding-box; padding: 10px; /* just to show box-shadow still works fine */ box-shadow: 0 3px 9px black, inset 0 0 9px white; } .grounded-radiants::after { position: absolute; top: -4px; bottom: -4px; left: -4px; right: -4px; background: linear-gradient(red, blue); content: ''; z-index: -1; border-radius: 16px; } 
 

Some text is here.
There's even a line break!
so cool.

¿Qué sucede si aplica el degradado al fondo? Que y agregue un div adicional en el interior, con el margen establecido en el ancho del borde anterior y con un fondo blanco, y por supuesto un borde de radio. De esta manera, tiene el efecto de un borde, pero en realidad está utilizando fondo, que está recortado correctamente.

Esto siempre funciona para mí en WebKit, ¡aunque es un poco complicado!

Básicamente, solo haces que el borde sea más grande y luego lo enmascaras con bordes de pseudo-elemento más grandes y más pequeños:).

 .thing { display: block; position: absolute; left: 50px; top: 50px; margin-top: 18pt; padding-left: 50pt; padding-right: 50pt; padding-top: 25pt; padding-bottom: 25pt; border-radius: 6px; font-size: 18pt; background-color: transparent; border-width: 3pt; border-image: linear-gradient(#D9421C, #E8A22F) 14% stretch; } .thing::after { content: ''; border-radius: 8px; border: 3pt solid #fff; width: calc(100% + 6pt); height: calc(100% + 6pt); position: absolute; top: -6pt; left: -6pt; z-index: 900; } .thing::before { content: ''; border-radius: 2px; border: 1.5pt solid #fff; width: calc(100%); height: calc(100% + 0.25pt); position: absolute; top: -1.5pt; left: -1.5pt; z-index: 900; } 

http://plnkr.co/edit/luO6G95GtxdywZF0Qxf7?p=preview

Yo usaría SVG para esto:

           

Soluciones para elementos transparentes : funciona al menos en Firefox.

De hecho, hay una manera que encontré sin pseudo clases, pero solo funciona para degradados radiales:

 body { background: linear-gradient(white, black), -moz-linear-gradient(white, black), -webkit-linear-gradient(white, black); height: 300px; } div{ text-align: center; width: 100px; height: 100px; font-size:30px; color: lightgrey; border-radius: 80px; color: transparent; background-clip: border-box, text; -moz-background-clip: border-box, text; -webkit-background-clip: border-box, text; background-image: radial-gradient(circle, transparent, transparent 57%, yellow 58%, red 100%), repeating-linear-gradient(-40deg, yellow, yellow 10%, orange 21%, orange 30%, yellow 41%); line-height: 100px; } 
  
OK

Esta alternativa es bastante nueva: https://github.com/bfintal/jQuery.IE9Gradius.js

Simplemente incluya la última secuencia de comandos en su etiqueta de cabeza y debería manejar el rest. Ver las notas readme