Độ dốc bộ lọc IE9 và xung đột bán kính biên giới

Question

Tôi đang cố gắng sử dụng hiệu ứng gradient và bán kính đường viền trên cùng một phần tử, nhưng có xung đột giữa chúng. Gradient hoạt động tốt, nhưng nó làm cho bán kính biên giới không hoạt động.

đây là kịch bản

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

Tôi không muốn sử dụng bất kỳ .htc tập tin.

Đây có phải là sự cố đã biết giữa bộ lọc và bán kính đường viền không?

Cảm ơn.

Answer 1

Bạn có thể sử dụng một gradient SVG, đây là một ví dụ mà làm việc trong IE9 với một border-radius: http://jsfiddle.net/thirtydot/Egn9A/

Để tạo ra SVG gradient, sử dụng: http://www.colorzilla.com/gradient-editor/. Bạn không đề cập đến việc cố gắng làm cho nó hoạt động trong các trình duyệt/phiên bản IE khác, nhưng nếu đó là những gì bạn đang cố gắng làm (bạn có thể vì bạn đang sử dụng filter), hãy sử dụng phương pháp được mô tả trong "Hỗ trợ IE9" phần.

Một trang web để tạo gradient SVG: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

Answer 2

Sử dụng các lớp dành cho bán kính biên giới và Gradient

HTML Code:

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

CSS Code:

.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 */