CSS : 배경 이미지의 오른쪽에 그라디언트가있는 문제

Question

이것은 Firefox에만 적용됩니다.

현재 CSS는 다음과 목표

.statusoverbutton>button{ 
    background:url(../html/my-bg.png); 
    width:242px; 
    height:54px; 
    border:0; 
    float:left; 
    color:#a97a30; 
    font-size: 16px; 
} 

: 내가 배경 이미지 만의 오른쪽 테두리에 그라데이션을 추가하려고 해요. 여기 http://www.colorzilla.com/gradient-editor/에서 생성 된 아래의 CSS와 놀겠다는 거 :

border-image-right: -moz-linear-gradient(top, #1e5799 0%, #c3c4bc 0%, #a4b8b5 50%, #c3c4bc 100%); 

이 작업을 수행하는 올바른 방법은 무엇입니까?

Answer 1

올바른 방법은 GCyrillus 말한대로, 그것은 크롬과 IE에서 작동하지만 것, 그것은

border-image-slice: 0% 100% 0% 0%; 
border-image-width: 0em 4em 0em 0em; 
border-image-outset: 0px 0px 0px 0px; 
border-image-repeat: round round; 
border-image-source: linear-gradient(90deg, #1e5799 0%, #c3c4bc 0%, #a4b8b5 50%, #c3c4bc 100%); 

하다 할 수 있지만하지 그것은 FF에서 작동

FF의 경우 국경 - 화상 - 원본은 이미지 (파일 이미지, 나는 뜻)

당신의 방법은 (지금) 2 가지 배경을 가지고있을 것입니다.