Tại sao màu đường viền đảo ngược khi áp dụng độ dốc nền?

Question

Tôi đã tình cờ gặp phải điều gì đó kỳ lạ. Khi áp dụng một đường viền màu trắng tiêu tan đến một yếu tố, các màu sắc của gradient nền xuất hiện ở phía sai của nguyên tố này, như vậy:

Tôi đã thấy điều này trong các phiên bản mới nhất của Firefox, Chrome , Opera và IE10. IE9 có tác dụng có ý định của tôi, tuy nhiên.

css của tôi hiện là:

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'); 

} 

Các màu đường viền ở bên mỹ màu trái và phải, nhưng kể từ khi điều này xảy ra ở khá nhiều mọi trình duyệt, tôi sẽ phải thừa nhận đây là sai lầm của tôi, không một lỗi trình duyệt. Tôi đang thiếu gì ở đây?

Answer 1

Bạn có thể khắc phục điều này bằng cách đặt background-origin thành 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; 
}