Rayon de bordure IE9 et fond de dégradé


191

IE9 est apparemment capable de gérer les coins arrondis en utilisant la définition standard CSS3 de border-radius .

Qu'en est-il de la prise en charge du rayon de bordure et du dégradé d'arrière - plan? Oui, IE9 doit les supporter tous les deux séparément, mais si vous mélangez les deux, le dégradé saigne du coin arrondi.

Je vois aussi de l'étrangeté avec des ombres apparaissant comme une ligne noire solide sous une boîte aux coins arrondis.

Voici les images présentées dans IE9:

image sans fond perdu, mais avec des coins nets image avec fond perdu

Comment contourner ce problème?


Merci pour les conseils @MikeP et @meanstreakuk. Je suppose que la réponse que je recherche est davantage celle de savoir quand IE prendra-t-il vraiment en charge les dégradés / arrondis ou comment puis-je faire en sorte que les deux fonctionnent ensemble.
SigmaBetaTooth

Vous avez la réponse de @meanstreak pour savoir comment faire fonctionner les 2 ensemble. Si vous voulez être réaliste, les dégradés SVG en tant qu'images d'arrière-plan sont beaucoup plus susceptibles d'être entièrement pris en charge par tous les navigateurs beaucoup plus tôt que les dégradés css (qui sont encore en cours de développement / discussion).
Kevin Peno

29
Incroyable MS est si loin derrière. Nous sommes en 2011 et IE est toujours confronté à ce genre de problèmes. zzzzzzz. .. sur leur site, ils disent: "vite c'est beau". Bien sûr que ça l'est. Jetez un œil aux photos ci-dessus. QUELLE BEAUTÉ RECTANGULAIRE!
SunnyRed

SunnyRed, eh bien, en Chrome, les éléments contenus dans quelque chose avec des coins arrondis saignent sur les coins. Vraiment, nous sommes 2012 et les navigateurs sont toujours aux prises avec ce genre de problèmes :-)
Joey

2
@SunnyRed It 2013 maintenant et le bogue est toujours là :(
Sliq

Réponses:


49

Voici une solution qui ajoute un dégradé d'arrière-plan, en utilisant un URI de données pour créer une image semi-transparente qui recouvre n'importe quelle couleur d'arrière-plan. J'ai vérifié qu'il était correctement coupé au rayon de la bordure dans IE9. C'est plus léger que les propositions basées sur SVG, mais en tant qu'inconvénient, il n'est pas indépendant de la résolution. Autre avantage: fonctionne avec votre HTML / CSS actuel et ne nécessite pas d'encapsulation avec des éléments supplémentaires.

J'ai saisi un PNG dégradé aléatoire de 20x20 via une recherche sur le Web et l'ai converti en URI de données à l'aide d'un outil en ligne. L'URI de données qui en résulte est plus petit que le code CSS pour tout ce désordre SVG, et encore moins le SVG lui-même! (Vous pouvez appliquer cette condition à IE9 uniquement en utilisant des styles conditionnels, des classes css spécifiques au navigateur, etc.) Bien sûr, la génération d'un PNG fonctionne très bien pour les dégradés de la taille d'un bouton, mais pas pour les dégradés de la taille d'une page!

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;
}

1
Et le gagnant est ... Je suppose que si je dois en choisir un, c'est tout. J'espérais voir plus d'informations pour savoir quand IE soutiendrait réellement ce qu'il dit qu'il prend en charge. En ce qui concerne la solution d'image d'arrière-plan, je préfère ne pas tirer d'images pour que IE se comporte. Merci à tous pour leurs suggestions utiles.
SigmaBetaTooth

1
J'ai trouvé que le réglage background-size: 100% 103%; background-position:center;est meilleur. 100% pour les deux valeurs ajoute une bordure étrange en haut et en bas.
Morten Christiansen

Ajout de la taille du fond: 100% 103%; background-position: centre; ne fait rien pour moi.
Gregory Bolkenstijn

2
Vous ne savez pas exactement pourquoi vous utilisez l'URI de données et pas seulement une image? Je suppose qu'une image signifierait un appel supplémentaire au serveur pour les utilisateurs ie9, mais avoir tous ces caractères supplémentaires envoyés à des navigateurs non-ie9 semble inutile. La solution fonctionne pour moi en tant qu'image, j'adorerais l'explication.
Decoy

4
Son URI de données manuel est ce que certains préprocesseurs CSS font normalement pendant le temps de déploiement. En ce qui concerne "mais quel genre de vilain hack est-ce", c'est une connerie cardinale. SVG est une image comme n'importe quelle autre, bien que vectorielle. Donc appeler SVG un hack, et proposer un PNG à la place est un non-sens absolu. Pourquoi SVG est-il meilleur? Indépendance de résolution, la même raison pour laquelle vous utilisez border-radius au lieu de l'arrière-plan d'image pixellisée.
skrat

104

J'ai également travaillé avec ce problème. Une autre "solution" consiste à ajouter un div autour de l'élément qui a le dégradé et les coins arrondis. Donnez à ce div les mêmes valeurs de hauteur, de largeur et de coin arrondi. Définissez le débordement sur masqué. Ceci est fondamentalement juste un masque, mais cela fonctionne pour moi.

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

3
Cela fonctionne parfaitement pour moi et est beaucoup plus simple que les autres solutions proposées.
Simon P Stevens

Beaucoup plus facile que la réponse actuellement acceptée. Cela fonctionne dans IE9 pour moi.
Andy McCluggage

Cela fonctionne ... si triste et pathétique. C'est le navigateur 'HTML5' !? Pourquoi je ne suis pas enthousiasmé par IE10.
Todd Vance

@toddv Ne vous inquiétez pas. Tout sera bientôt fini. Pas assez tôt, mais bientôt. Voir daringfireball.net/linked/2012/07/04/windows-hegemony Avec un peu de chance, personne n'aura jamais à se soucier de supporter IE12 ... peut-être IE14 - ça devient flou.
jinglesthula

2
Juste une note mineure, mais vos instructions de rayon de bordure doivent être inversées pour promouvoir la compatibilité ascendante. J'ai fait le montage.
Parris

44

Je pense qu'il vaut la peine de mentionner que dans de nombreux cas, vous pouvez utiliser une boîte-ombre en médaillon pour "simuler" l'effet de dégradé et éviter les bords laids dans IE9. Cela fonctionne particulièrement bien avec les boutons.

Voir cet exemple: http://jsfiddle.net/jancbeck/CJPPW/31/

Comparaison d'un style de bouton avec un dégradé linéaire ou une boîte-ombre


2
Excellente solution dans mon cas car je ne l'ai utilisé que sur un bouton et j'avais besoin d'un dégradé comme vous l'avez dessiné. J'ai utilisé des commentaires conditionnels pour gte IE9 pour le moment et ensuite appliquébox-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

élégant et simple. i ++.
Eliran Malka

1
+1 pour sortir des sentiers battus. Fonctionne extrêmement bien pour les onglets ainsi que les boutons. L'utilisation de l'encart conserve le dégradé à l'intérieur de l'élément.
GlennG

C'est la meilleure solution que j'ai vue. Pure css, ne nécessite pas d'éléments ou d'images supplémentaires.
Zaqx

1
belle astuce mais j'ai des dégradés partout sur le site. je ne peux pas tous les changer pour stupide ie.
Mehmet Fatih Yıldız

8

Vous pouvez également utiliser CSS3 PIE pour résoudre ce problème:

http://css3pie.com/

Bien sûr, cela peut être exagéré si vous ne dépendez que d'un seul élément avec des coins arrondis et un dégradé d'arrière-plan, mais c'est une option à considérer si vous incorporez un certain nombre de fonctionnalités CSS3 communes sur vos pages et que vous souhaitez un support facile. pour IE6 +


1
même avec css3pie et ie9, je ne vois pas le dégradé. Je vois les coins arrondis et l'ombre portée, mais pas de dégradé.
Kevin

7

J'ai aussi rencontré ce bug. Ma suggestion serait d'utiliser une image d'arrière-plan répétée pour le dégradé dans ie9. IE9 mosaïque correctement l'image derrière les bordures arrondies (à partir de RC1).

Je ne vois pas comment écrire 100 lignes de code pour remplacer 1 ligne de CSS est simple ou élégant. SVG est cool et tout, mais pourquoi passer par tout cela alors que des solutions plus simples pour les arrière-plans dégradés existent depuis des années.


5

Je suis également resté coincé dans le même problème n j'ai constaté qu'IE ne pouvait pas rendre le rayon et le dégradé de la bordure à la fois, les deux conflits, le seul moyen de résoudre ce mal de tête est de supprimer le filtre et d'utiliser le dégradé via le code svg, juste pour IE ..

vous pouvez obtenir le code svg en utilisant leur code de couleur dégradé, à partir de ce site Microsoft (spécialement conçu pour le dégradé en svg):

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

prendre plaisir :)


Le lien n'est plus valide.
écraser le

5

Utilisez simplement un div wrapper (arrondi et trop-plein caché) pour découper le rayon pour IE9. Simple, fonctionne avec plusieurs navigateurs. SVG, JS et les commentaires conditionnels ne sont pas nécessaires.

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

4

Cette publication de blog m'a aidé: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Fondamentalement, vous utilisez un commentaire conditionnel pour supprimer le filtre, puis créez des «sprites» SVG de dégradés que vous pouvez utiliser comme images d'arrière-plan.

Simple et élégant!


Je vis ça. Surtout de gros efforts pour m'aider ENFIN à terminer ma recherche sur la façon de créer des sprites en utilisant SVG. Puisque SVG est évolutif et que les sprites sont possibles, je trouve que les packs de sprites SVG sont beaucoup plus polyvalents que les dégradés css et, comme je l'ai dit ci-dessus, seront probablement pris en charge à 100% dans les navigateurs bien avant les dégradés CSS.
Kevin Peno

Oh, la seule chose que j'ajouterais à cela, c'est qu'actuellement, le webkit et, je crois, l'opéra prennent également en charge SVG dans les url()appels d' images CSS . Il ne reste plus qu'un seul, alors laissez tomber les 1000 conditionnels et servez SVG pour le bg sur tout ce qui le supporte. Pour tout le monde, diffusez une image tramée. Ensuite, ce hack devient gérable.
Kevin Peno

4

IE9 gère correctement le rayon de la bordure et les dégradés. Le problème est que IE9 rend le filtre correct en plus du gradient. La façon de résoudre correctement ce problème consiste à désactiver les filtres sur les déclarations de style qui utilisent la propriété filter.

À titre d'exemple sur la meilleure façon de résoudre ce problème:

Vous avez une classe de boutons dans votre feuille de style principale.

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

Dans une feuille de style IE9 conditionnelle:

.btn { filter: none; }

Tant que la feuille de style IE9 est référencée dans votre tête après votre feuille de style principale, cela fonctionnera parfaitement.


2
ie9 ne rend pas les dégradés linéaires
James Westgate

3

Il existe un moyen simple de le faire fonctionner sous IE9 avec un seul élément.

Jetez un œil à ce violon: http://jsfiddle.net/bhaBJ/6/

Le premier élément définit le Border-Radius. Le deuxième pseudo-élément définit le dégradé d'arrière-plan.

Quelques instructions clés:

  • le parent doit avoir un parent une position ou absolue
  • le parent doit avoir un débordement: masqué ; (pour que l'effet de rayon de bordure soit visible)
  • Le pseudo-élément :: before (ou :: after) doit avoir un z-index: -1 (solution de contournement)

La déclaration de l'élément de base ressemble à quelque chose comme:

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

Déclaration de pseudo-élément:

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

}

Juste parfait! Merci! :)
majimekun

J'ai mis le rayon de la frontière à 20 dans votre exemple, et les bordures ne sont pas coupées dans IE9
écraser le

Essayez de définir ceci dans votre en-tête: <meta http-equiv = "X-UA-Compatible" content = "IE = 9" />
Marakoss

2

J'ai décidé de désactiver IE9 des coins arrondis pour contourner ce bogue. C'est propre, facile et générique utilisable.

{
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);
}

1

Le masque div dans IE9 est une bonne idée. Je fournis un code complet pour aider à clarifier un peu. Bien que je ne sois pas satisfait d'envelopper le bouton dans un DIV, je pense que c'est plus facile à comprendre que d'incorporer un masque PNG ou de passer par tous les efforts en utilisant SVG. Peut-être que IE 10 le supportera correctement.

<!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>

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

Je faisais cela pour moi et une fois que j'ai enlevé la ligne "filter:", le saignement a disparu. De plus, j'utilise PIE.

Saignements:

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

Ne saigne pas:

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

Correction rapide des ombres d'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(' '));
        }
    });
}

}


1

Vous pourriez utiliser l' ombre pour obtenir un dégradé et vous allez travailler sur Internet Explorer 9 avecborder-radius

Quelque chose comme ça:

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

0

Je ne sais pas s'il s'agissait d'une solution unique ou valide, mais ...

J'ai trouvé que si le rayon de la bordure est supérieur à la largeur de la bordure, je n'ai pas rencontré le problème. Quand ils étaient identiques, j'obtenais les coins carrés.


0

En utilisant la boussole et le sass, vous pouvez facilement y parvenir comme suit:

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

Compass générera une image SVG pour vous.

ainsi:

#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;

}


0

Travaille pour moi...

<!--[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%);
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.