¿Por qué se invierten los colores de borde cuando se aplica un degradado de fondo?

Question

Me he tropezado con algo raro. Cuando se aplica un borde blanco discontinua a un elemento, los colores del gradiente de fondo aparecen en el lado equivocado del elemento, así:

he visto esto en las últimas versiones de Firefox, Chrome , Opera y en IE10. IE9 tiene mi efecto intencionado, sin embargo.

Mi CSS es actualmente:

aside.block { 

    width:     259px; 
    padding:    12px; 
    margin:     15px 0; 

    border:     2px dashed #fff; 

    background-image:  -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
    background-image:  -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
    background-image:  -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
    background-image:  -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
    background-image:  linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
    filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00', endColorstr='#dbcb00'); 

} 

Los colores del borde de la multa del color del lado izquierdo y derecho, pero como esto sucede en casi todos los navegadores, que tendrán que asumir esta es mi error, no se un error del navegador. ¿Que me estoy perdiendo aqui?

Answer 1

Puede solucionar esto configurando background-origin en border-box.

http://jsfiddle.net/LVfqe/11/

.block{ 
     width:     259px; 
     padding:    12px; 
     background-image:  -o-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
     background-image:  -moz-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
     background-image:  -webkit-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
     background-image:  -ms-linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
     background-image:  linear-gradient(bottom, rgb(219,203,0) 0%, rgb(255,236,0) 100%); 
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec00',endColorstr='#dbcb00'); 
border:     2px dashed #fff; 
background-origin:border-box; 
}