IE9 raio da borda e sangramento no gradiente de fundo

191

Aparentemente, o IE9 é capaz de lidar com cantos arredondados usando a definição padrão CSS3 de border-radius.

E o suporte ao raio da borda e ao gradiente de fundo? Sim, o IE9 é suportá-los separadamente, mas se você misturar os dois, o gradiente sangra pelo canto arredondado.

Também estou vendo estranheza com sombras mostrando uma sólida linha preta sob uma caixa com cantos arredondados.

Aqui estão as imagens mostradas no IE9:

imagem sem sangramento, mas com cantos afiados imagem com sangramento

Como posso solucionar esse problema?

SigmaBetaTooth
fonte
Obrigado pelas dicas @ MikeP e @meanstreakuk. Acho que a resposta que estou procurando é mais na linha de quando o IE realmente apoiará gradientes / arredondamentos ou como faço para que os dois trabalhem juntos.
SigmaBetaTooth
Você tem a resposta de @meanstreak sobre como fazer com que os 2 funcionem juntos. Se você quiser ser realista, os gradientes SVG como imagens de plano de fundo têm muito mais probabilidade de serem totalmente suportados por todos os navegadores muito antes dos gradientes css (que ainda estão em desenvolvimento / discussão).
precisa
29
MS inacreditável está tão atrás. Estamos em 2011 e o IE ainda está lidando com esse tipo de problema. zzzzzzz. ..em seu site eles dizem: "rápido agora é bonito". Claro que é. Dê uma olhada nas fotos postadas acima. QUE BELEZA RETANGULAR!
SunnyRed 02/08/19
SunnyRed, bem, no Chrome os elementos contidos em algo com cantos arredondados sangram sobre os cantos. Realmente, é de 2012 e navegadores ainda estão lidando com este tipo de problemas :-)
Joey
2
@SunnyRed It 2013 agora e o bug ainda está lá :(
Sliq 15/04/2013

Respostas:

49

Aqui está uma solução que adiciona um gradiente de plano de fundo, usando um URI de dados para criar uma imagem semitransparente que sobrepõe qualquer cor de plano de fundo. Eu verifiquei que ele está cortado corretamente no raio da borda no IE9. Esse peso é mais leve que as propostas baseadas em SVG, mas, como desvantagem, não é independente de resolução. Outra vantagem: trabalha com seu HTML / CSS atual e não requer quebra com elementos adicionais.

Peguei um PNG gradiente aleatório de 20x20 por meio de uma pesquisa na Web e o converti em um URI de dados usando uma ferramenta on-line. O URI de dados resultante é menor que o código CSS para toda essa bagunça SVG, muito menos o próprio SVG! (Você pode aplicar isso condicionalmente ao IE9 apenas usando estilos condicionais, classes de CSS específicas do navegador etc.) Obviamente, gerar um PNG funciona muito bem para gradientes de tamanho de botão, mas não para gradientes de página!

HTML:

<span class="button">This is a button</span>

CSS:

span.button { 
  padding: 5px 10px;
  border-radius: 10px;
  background-color: orange;  
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAvUlEQVQ4y63VMQrDMAyF4d/BGJ+rhA4dOnTo0Kn3P4ExxnSoXVQhpx0kEMmSjyfiKAF4AhVoqrvqjXdtoqPoBMQAPAZwhMpaYkAKwH1gFtgG0v9IlyZ4E2BVabtKeZhuglegKKyqsWXFVboJXgZQfqSUCZOFATkAZwEVY/ymQAtKQJ4Jd4VZqARnuqyxmXAfiAQtFJEuG9dPwtMC0zD6YXH/ldAddB/Z/aW4Hxv3g+3+6bkvB/f15b5gXX8BL0z+tEEtuNA8AAAAAElFTkSuQmCC);
  background-size: 100% 100%;

  border: 2px solid white;
  color: white;
}
Steve Eisner
fonte
1
E o vencedor é ... Eu acho que se eu tiver que escolher um, é isso. Eu esperava ver mais informações sobre quando o IE realmente suportaria o que diz ser suportado. Quanto à solução de imagem de fundo, sou parcial em não extrair imagens para fazer o IE se comportar. Obrigado a todos por suas sugestões úteis.
SigmaBetaTooth 21/03
1
Eu achei que a configuração background-size: 100% 103%; background-position:center;é melhor. 100% para ambos os valores adiciona uma borda estranha na parte superior e inferior.
Morten Christiansen
Adicionando tamanho do plano de fundo: 100% 103%; posição de fundo: centro; não faz nada por mim.
Gregory Bolkenstijn 22/09
2
Não sabe ao certo por que você está usando o uri de dados e não apenas uma imagem? Eu acho que uma imagem significaria uma chamada extra para o servidor para usuários ie9, mas enviar todos esses caracteres extras para navegadores que não sejam ie9 parece um desperdício. Solução está funcionando para mim como uma imagem, adoraria a explicação.
Decoy
4
Seu URI de dados manual é o que alguns pré-processadores CSS normalmente fazem durante o tempo de implantação. A partir de "mas que tipo de truque feio é esse", isso é uma besteira fundamental. SVG é imagem como qualquer outra, embora vetorial. Portanto, chamar SVG de hack e propor um PNG não fazem sentido. Por que o SVG é melhor? Independência da resolução, pelo mesmo motivo que você usa o raio da borda em vez do fundo da imagem rasterizada.
Skrat 13/03/12
104

Eu também tenho trabalhado com esse problema. Outra "solução" é adicionar uma div ao redor do item que possui os cantos gradiente e arredondado. Faça com que essa div tenha os mesmos valores de altura, largura e canto arredondado. Defina o estouro como oculto. Isso é basicamente apenas uma máscara, mas funciona para mim.

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}
user740128
fonte
3
Isso funciona perfeitamente para mim e é muito mais simples do que as outras soluções propostas.
Simon P Stevens
Muito mais fácil do que a resposta atualmente aceita. Isso funciona no IE9 para mim.
Andy McCluggage
Isso funciona ... tão triste e patético. Este é o navegador 'HTML5' !? Por que não estou animado com o IE10.
Todd Vance
@toddv Não se preocupe. Tudo terminará em breve. Não em breve, mas em breve. Veja daringfireball.net/linked/2012/07/04/windows-hegemony Com alguma sorte, ninguém nunca terá que se preocupar em apoiar o IE12 ... talvez o IE14 - isso é confuso.
jinglesthula
2
Apenas uma observação secundária, mas as instruções do raio da borda devem ser revertidas para promover a compatibilidade futura. Eu fiz a edição.
Parris
44

Acho que vale a pena mencionar que, em muitos casos, você pode usar uma sombra de caixa embutida para "falsificar" o efeito gradiente e evitar as bordas feias do IE9. Isso funciona especialmente bem com os botões.

Veja este exemplo: http://jsfiddle.net/jancbeck/CJPPW/31/

Comparação de um estilo de botão com gradiente linear ou sombra de caixa

Jan Beck
fonte
2
Excelente correção no meu caso, porque eu usei isso apenas em um botão e precisava de um gradiente como você desenhou. Eu costumava comentários condicionais para gte IE9 para agora e, em seguida, aplicadobox-shadow: inset 0 -8px 10px rgba(0,0,0,0.15), 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
Volomike
elegante e simples. i ++.
Eliran Malka
1
+1 por pensar fora da caixa. Funciona muito bem para guias e botões. O uso da inserção mantém o gradiente dentro do elemento.
GlennG
Esta é a melhor solução que eu já vi. CSS puro, não requer elementos extras ou imagens.
Zaqx
1
bom truque, mas eu tenho gradientes em todo o site. Eu não posso mudar todos eles por ie estúpido.
Mehmet Fatih Yıldız
8

Você também pode usar CSS3 PIE para resolver esse problema:

http://css3pie.com/

Obviamente, isso pode ser um exagero se você estiver apenas dependendo de um único elemento com cantos arredondados e um gradiente de plano de fundo, mas é uma opção a considerar se estiver incorporando vários recursos CSS3 comuns em suas páginas e desejar suporte fácil para IE6 +

Louis L.
fonte
1
mesmo com css3pie e ie9, não vejo o gradiente. Vejo os cantos arredondados e a sombra, mas sem gradiente.
30711 Kevin
7

Também encontrei esse bug. Minha sugestão seria usar uma imagem de fundo repetida para o gradiente em ie9. O IE9 coloca a imagem corretamente atrás das bordas arredondadas (a partir de RC1).

Não vejo como escrever 100 linhas de código para substituir uma linha de CSS é simples ou elegante. O SVG é legal e tudo mais, mas por que passar por tudo isso quando soluções mais fáceis para fundos gradientes existem há anos.

MikeP
fonte
5

Eu também fiquei preso no mesmo problema e descobri que o IE não pode renderizar o raio e o gradiente da borda de cada vez, ambos conflitam, a única maneira de resolver essa dor de cabeça é remover o filtro e usar o gradiente via código svg, apenas para o IE ..

você pode obter o código svg usando o código de cores degradê, da Microsoft neste site (feito especialmente para o degradê em svg):

http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html

desfrutar :)

Himanshu Jani
fonte
O link não é mais válido.
esmagar
5

Basta usar uma div de wrapper (arredondada e oculta) para cortar o raio do IE9. Simples, funciona em vários navegadores. Comentários SVG, JS e condicionais são desnecessários.

<div class="ie9roundedgradient"><div class="roundedgradient">text or whatever</div></div>

.ie9roundedgradient { 
display:inline-block; overflow:hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
}
.roundedgradient { 
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; 
/* use colorzilla to generate your cross-browser gradients */ 
}
Brian Lewis
fonte
4

Esta postagem do blog me ajudou a: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Basicamente, você usa um comentário condicional para remover o filtro e, em seguida, cria 'sprites' de gradientes do SVG que podem ser usados ​​como imagens de fundo.

Simples e elegante!

Dan Herd
fonte
Eu vivo isso. Especialmente grandes empresas por me ajudar FINALMENTE a minha pesquisa sobre como criar sprites usando SVG. Como o SVG é escalável e os sprites são possíveis, acho que os pacotes de sprites SVG são muito mais versáteis que os gradientes de css e, como eu disse acima, provavelmente terão suporte 100% nos navegadores muito antes dos gradientes de CSS.
precisa
Ah, a única coisa que gostaria de acrescentar é que atualmente o webkit e, acredito, o Opera também suportam SVG em url()chamadas de imagem CSS . Apenas um se mantém à esquerda, portanto, elimine os 1000 condicionais e sirva ao SVG para o BG em todos os que o suportam. Para todos os outros, sirva uma imagem rasterizada. Então esse hack torna-se administrável.
precisa
4

O IE9 lida com o raio da borda e os gradientes juntos corretamente. O problema é que o IE9 torna o filtro adequado , além de do gradiente. A maneira de resolver isso corretamente é desativar os filtros nas declarações de estilo que utilizam a propriedade filter.

Como um exemplo de como resolver isso da melhor maneira:

Você tem uma classe de botão na sua folha de estilo principal.

.btn {
    background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}

Em uma folha de estilo condicional do IE9:

.btn { filter: none; }

Desde que a folha de estilo IE9 seja referenciada em sua cabeça após a folha de estilo principal, ela funcionará perfeitamente.

WFendler
fonte
2
O IE9 não processar gradientes lineares
James Westgate
3

Existe uma maneira simples de fazê-lo funcionar no IE9 com apenas UM elemento.

Dê uma olhada neste violino: http://jsfiddle.net/bhaBJ/6/

O primeiro elemento define o raio da borda. O segundo pseudo-elemento define o gradiente de fundo.

Poucas instruções importantes:

  • pai deve ter posição relativa ou absoluta
  • pai deve ter overflow: oculto ; (para que o efeito raio da borda fique visível)
  • O pseudoelemento :: before (ou :: after) deve ter z-index: -1 (tipo de solução alternativa)

A declaração do elemento base é algo como:

.button{
    position: relative;
    overflow: hidden;        /*make childs not to overflow the parent*/

    border-radius: 5px;      /*don't forget to make it cross-browser*/

    z-index:2;               /*just to be sure*/
}

Declaração de pseudo-elemento:

.button:before{

    content: " ";                     /*make it a node*/
    display: block;     

    position: absolute;               
    top:0;left:0;bottom:0;right:0;    /*same width and height as parent*/

    z-index: -1;                      /*force it to NOT overlay the TEXT node*/

    /*GRADIENT declarations...*/
    background: -ms-linear-gradient(top,  #ff3232 0%,#7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232',endColorstr='#7db9e8',GradientType=0 );

}
Marakoss
fonte
Simplesmente perfeito! Obrigado! :)
majimekun
Eu defini o border-radius para 20 no seu exemplo, e as fronteiras não são cortados no IE9
crush
Tente definir isso no seu cabeçalho: <meta http-equiv = conteúdo "X-UA-Compatible" = "IE = 9" />
Marakoss
2

Decidi desativar o IE9 dos cantos arredondados para solucionar esse bug. É limpo, fácil e genérico utilizável.

{
border-radius:10px;
border-radius:0px \0/;
background:linear-gradient(top , #ffeecc, #ff8800);
/* ... (-moz -ms,-o, -webkit) gradients */    
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffeecc,endColorstr=#ff8800);
}
chave_
fonte
1

A máscara div no IE9 é uma boa ideia. Estou fornecendo algum código completo para ajudar a esclarecer um pouco. Embora não esteja satisfeito com a quebra do botão em uma DIV, acho que é mais fácil entender do que incorporar uma máscara PNG ou passar por todo o esforço usando SVG. Talvez o IE 10 o suporte corretamente.

<!DOCTYPE html>
<html>
<head>
<title>Button Test</title>
<style>
.btn_mask { cursor:pointer;padding:5px 10px;border-radius:11px 11px 11px 11px;
 background-color:transparent;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;overflow:hidden;padding:0px;
 float:left; }
.btn { cursor:pointer;text-decoration:none;border:1px solid rgb(153,153,153);
 padding:5px 10px;color:rgb(0,0,0);font-size:14px;font-family:arial,serif;
 text-shadow:0px 0px 5px rgb(255,255,255);font-size:14px;
 border-radius:11px 11px 11px 11px;-moz-border-radius:11px 11px 11px 11px;
 -webkit-border-radius:11px 11px 11px 11px;box-shadow:0px 0px 0px rgb(0,0,0);
 -moz-box-shadow:0px 0px 0px rgb(0,0,0);
 -webkit-box-shadow:0px 0px 0px rgb(0,0,0);background-color:rgb(255,204,0);
 background-image:linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
 background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,153)),to(rgb(255,204,0)));-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#ffcc00)')";background-image:-moz-linear-gradient(-90deg,rgb(255,255,153),rgb(255,204,0));
}
.btn:hover { cursor:pointer;text-decoration:none; border:1px solid rgb(153,153,153); padding:5px 10px 5px 10px; color:rgb(0,0,0); font-size:14px; font-family:arial,serif; text-shadow:0px 0px 5px rgb(255,255,255); font-size:14px; border-radius:11px 11px 11px 11px; -moz-border-radius:11px 11px 11px 11px; -webkit-border-radius:11px 11px 11px 11px; box-shadow:0px 0px 0px rgb(0,0,0); -moz-box-shadow:0px 0px 0px rgb(0,0,0); -webkit-box-shadow:0px 0px 0px rgb(0,0,0); background-color:rgb(255,255,0); background-image:linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); background-image:-webkit-gradient(linear,50% 0%,50% 100%,from(rgb(255,255,0)),to(rgb(255,255,153))); background-image:-moz-linear-gradient(-90deg,rgb(255,255,0),rgb(255,255,153)); }
</style>
</head>
<body>
<form name='form1'>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
<div class='btn_mask'><input type='button' class='btn' value='a button'></div>
</form>
</body>
</html>
oprimido
fonte
1
background: #4f81bd; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmODFiZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4YWJiZDciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #4f81bd 0%, #8abbd7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#4f81bd), color-stop(100%,#8abbd7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* IE10+ */
background: linear-gradient(left, #4f81bd 0%,#8abbd7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f81bd', endColorstr='#8abbd7',GradientType=1 ); /* IE6-8 */

Estava fazendo isso comigo e depois que removi a linha "filter": o sangramento desapareceu. Além disso, eu uso torta.

Sangramentos:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8abbd7', endColorstr='#4f81bd',GradientType=0 ); /* IE6-8 */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

Não sangra:

    background: #8abbd7; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhYmJkNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0ZjgxYmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8abbd7 0%, #4f81bd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8abbd7), color-stop(100%,#4f81bd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* IE10+ */
background: linear-gradient(top, #8abbd7 0%,#4f81bd 100%); /* W3C */
-pie-background: linear-gradient(#8ABBD7, #4f81bd);
behavior: url(../PIE/PIE.htc);

Correção rápida da sombra do IE:

fixBoxShadowBlur($('*'));

function fixBoxShadowBlur(jQueryObject){
if($.browser.msie && $.browser.version.substr(0, 1) == '9'){
    jQueryObject.each(function(){
        boxShadow = $(this).css('boxShadow');
        if(boxShadow != 'none'){
            var bsArr = boxShadow.split(' ');
            bsBlur = parseInt(bsArr[2]) || 0;
            bsBlurMeasureType = bsArr[2].substr(("" + bsBlur).length);
            bsArr[2] = (bsBlur * 2) + bsBlurMeasureType;
            $(this).css('boxShadow', bsArr.join(' '));
        }
    });
}

}

Shawn Rebelo
fonte
1

Você pode usar a sombra para obter gradiente e funcionará no Internet Explorer 9 comborder-radius

Algo assim:

box-shadow: inset 0px 0px 26px 5px gainsboro;
Rajesh
fonte
0

Não tenho certeza se essa foi uma solução alternativa ou válida, mas ...

Descobri que, desde que o raio da borda seja maior que a largura da borda, não encontrei o problema. Quando eles eram iguais, eu estava conseguindo os cantos quadrados.

Daddywoodland
fonte
0

Usando bússola e sass você pode facilmente conseguir isso da seguinte maneira:

@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }

O Compass irá gerar uma imagem SVG para você.

igual a:

#gradiant {
 background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9InRvIiB5MT0iYm90dG9tIiB4Mj0idG8iIHkyPSJ0b3AiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwODJhMmUiLz48c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0icmdiYSg4LCA0MiwgNDYsIDAuNzYpIi8+PHN0b3Agb2Zmc2V0PSI0MyUiIHN0b3AtY29sb3I9InJnYmEoNywgNDMsIDQ3LCAwLjcxKSIvPjxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSJyZ2JhKDQsIDQ0LCA1MCwgMC41OCkiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwNDJjMzIiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #082a2e),   color-stop(35%, rgba(8, 42, 46, 0.76)), color-stop(43%, rgba(7, 43, 47, 0.71)), color-stop(58%, rgba(4, 44, 50, 0.58)), color-stop(100%, #042c32));
background-image: -webkit-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -moz-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: -o-linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);
background-image: linear-gradient(to bottom, #082a2e 0%, rgba(8, 42, 46, 0.76) 35%, rgba(7, 43, 47, 0.71) 43%, rgba(4, 44, 50, 0.58) 58%, #042c32 100%);

}

/* line 28, ../sass/boxshadow.scss */
#border-radius {
 -moz-border-radius-topright: 8px;
  -webkit-border-top-right-radius: 8px;
   border-top-right-radius: 8px;
 -moz-border-radius-bottomright: 8px;
  -webkit-border-bottom-right-radius: 8px;
  border-bottom-right-radius: 8px;

}

raam86
fonte
0

Funciona para mim...

<!--[if gte IE 9]>
  <style type="text/css">
  .gradient{
   filter: ;
}
</style>

css

border-radius: 10px;
background: #00a8db; /* Old browsers */
background: -moz-linear-gradient(top, #00a8db 0%, #116c8c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00a8db), color-    stop(100%,#116c8c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Chrome10+,Safari5.1+     */
background: -o-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a8db 0%,#116c8c 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a8db 0%,#116c8c 100%); /* W3C */
-webkit-box-shadow: 1px 5px 2px #999;
-moz-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
color: #fff;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a8db',     endColorstr='#116c8c',GradientType=0 ); /* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background:     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYThkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMTZjOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #116C8C 0%, #00A5D7 100%);

fonte