Gradient filtru IE9 i konflikt międzyramkowy

Question

Próbuję użyć efektu gradientu i promienia obramowania na tym samym elemencie, ale istnieje konflikt między nimi. Gradient działa dobrze, ale powoduje, że promień obramowania nie działa.

tutaj jest skrypt

.selector { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4317',endColorstr='#891a00'); 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
} 

Nie chcę używać żadnych .htc plików.

Czy to znany problem między filtrem a promieniem brzegu?

Dzięki.

Answer 1

Można użyć gradientu SVG, oto przykład, który działa w IE9 z border-radius: http://jsfiddle.net/thirtydot/Egn9A/

Aby wygenerować SVG gradientu, przeznaczenie: http://www.colorzilla.com/gradient-editor/. Nie wspominasz o próbie uruchomienia go w innych przeglądarkach/wersjach IE, ale jeśli to właśnie próbujesz zrobić (możesz być, ponieważ używasz filter), użyj metody opisanej w "Obsługa IE9" Sekcja.

Innej strony, aby wygenerować gradienty SVG: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Answer 2

korzystać z tych klas dla promienia granicznego i gradient

kod:

<div class="box-radius ">border radius with gradient</div>

CSS kod:

.box-radius { 
     -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      -o-border-radius: 5px; 
       border-radius: 5px; 
     /* behavior: url(border-radius.htc); */ 
    } 

.gradient { 
    background-image: -moz-linear-gradient(top, #ff4317, #891a00); /* Firefox 3.6 */ 
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ff4317),color-stop(1, #891a00)); /* Safari & Chrome */ 
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00'); /* IE6 & IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00')"; /* IE8 */