border-radius et le saignement gradient de fond IE9
https://stackoverflow.com/questions/4692686
-
11-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
IE9 est apparemment capable de gérer des coins arrondis en utilisant la définition standard CSS3 de border-radius.
Qu'en est-il le soutien pour le rayon de la frontière et gradient de fond? Oui IE9 est de les soutenir à la fois séparément, mais si vous mélangez les deux le gradient saigne du coin arrondi.
Je suis aussi avec des ombres vois étrange montrant comme une ligne noire sous une boîte avec des coins arrondis.
Voici les images présentées dans IE9:
Comment puis-je contourner ce problème?
La solution
Voici une solution qui ajoute un gradient d'arrière-plan, en utilisant une URI données pour créer une image semi-transparente qui recouvre toutes les couleurs d'arrière-plan. Je l'ai vérifié qu'il est correctement clipsé au rayon de la frontière dans IE9. Ceci est un poids plus léger que les propositions basées sur SVG mais comme un inconvénient, n'est pas indépendant de la résolution. Un autre avantage:. Fonctionne avec votre code HTML en cours / CSS et ne nécessite pas d'emballage avec des éléments supplémentaires
Je saisi un PNG gradient 20x20 aléatoire via une recherche sur le Web, et converti en un URI de données en utilisant un outil en ligne. L'URI données résultant est plus petit que le code CSS pour tout ce gâchis SVG, beaucoup moins le SVG lui-même! (Vous pouvez appliquer cette condition à IE9 utilisant uniquement des styles conditionnels, classes CSS spécifiques au navigateur, etc.) Bien sûr, la génération d'un PNG fonctionne très bien pour les gradients de boutons de taille, mais pas des gradients de 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;
}
Autres conseils
J'ai aussi travaillé avec ce problème. Une autre « solution » est d'ajouter un div autour de l'élément qui a le gradient et des coins arrondis. Faire que div la même hauteur, la largeur et les valeurs d'angle arrondies. Réglez le trop-plein caché. Ceci est fondamentalement juste un masque, mais ça marche 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 */
}
Je pense qu'il est important de mentionner que dans de nombreux cas, vous pouvez utiliser une ombre en forme de boîte encart à « faux » l'effet de dégradé et d'éviter les bords laids dans IE9. Cela fonctionne particulièrement bien avec les boutons.
Voir cet exemple: http://jsfiddle.net/jancbeck/CJPPW/31/
Vous pouvez également utiliser CSS3 PIE pour résoudre ce problème:
Bien sûr, cela pourrait être exagéré si vous êtes juste en fonction d'un seul élément avec des coins arrondis et un gradient de fond, mais il est une option à considérer si vous incorporer un certain nombre de CSS3 commune dispose sur vos pages et veulent un soutien facile pour IE6 +
je suis tombé sur ce bug aussi. Ma suggestion serait d'utiliser une image de fond pour le gradient répété dans IE9. IE9 carreaux correctement l'image derrière les bords arrondis (au 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 ce que lorsque des solutions plus simples pour les milieux dégradés ont depuis des années.
J'ai aussi coincé dans le même problème n a constaté que IE ne peut pas rendre le rayon de la frontière et le gradient à la fois à la fois, sur les deux conflits, la seule façon de résoudre ce casse-tête est d'enlever le filtre et utiliser le gradient via code svg, juste pour IE ..
vous pouvez obtenir le code svg en utilisant leur code couleur de dégradé, de Microsoft ce site (spécialement conçu pour dégradé svg):
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
profiter:)
Il suffit d'utiliser un div wrapper (arrondie et trop-plein caché) pour couper le rayon de IE9. Simple, fonctionne cross-browser. 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 */
}
Ce blog annonce m'a aidé: http : //abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
En fait, vous utilisez un commentaire conditionnel pour enlever le filtre, puis créer SVG « sprites » des gradients que vous pouvez utiliser comme des images d'arrière-plan.
Simple et élégant
IE9 gère border-radius et gradients ensemble correctement. Le problème est que IE9 rend le filtre approprié , en plus de le gradient. La façon de résoudre correctement est de désactiver les filtres sur les déclarations de style qui utilisent la propriété de filtre.
À titre d'exemple sur la meilleure façon de résoudre ceci:
Vous avez une classe de bouton 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 conditionnel:
.btn { filter: none; }
Tant que la feuille de style IE9 est référencé dans votre tête après votre principale stylesheet cela fonctionnera parfaitement.
Il existe un moyen simple de le faire fonctionner sous IE9 avec un seul élément.
Jetez un oeil à ce violon: http://jsfiddle.net/bhaBJ/6/
Le premier élément définit la frontière-Rayon. Deuxième pseudo-élément définit l'arrière-plan dégradé.
Quelques instructions clés:
- parent doit avoir rapport ou position absolue
- parent doit avoir overflow: hidden ; (Dans l'ordre à l'effet d'un rayon de bordure soit visible)
- :: avant (ou après ::) pseudo-élément doit avoir z-index: -1 (solution de type)
déclaration de l'élément de base est 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 );
}
J'ai décidé de désactiver IE9 d'arrondir les coins pour contourner ce bug. Il est propre, facile et utilisable générique.
{
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);
}
Le div masque IE9 est une bonne idée. Je fournit un code complet pour aider à clarifier un peu. Bien que je ne suis pas satisfait enroulant le bouton dans un DIV, je pense qu'il est plus facile de comprendre que l'intégration d'un masque PNG ou en passant par tous les efforts en utilisant SVG. Peut-être que IE 10 soutiendra 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>
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 */
faisait cela pour moi et une fois que je l'ai enlevé le « filtre: » ligne le saignement est parti. De plus, j'utilise PIE.
Bleeds:
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:
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);
rapide IE Ombre Fix:
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(' '));
}
});
}
}
Vous pouvez utiliser shadow pour atteindre gradient, et va travailler sur Internet Explorer 9 avec border-radius
Quelque chose comme ceci:
box-shadow: inset 0px 0px 26px 5px gainsboro;
Je ne sais pas si cela était un arrêt ou une solution de contournement valide, mais ...
Je trouve que à condition que le rayon de la frontière est supérieure à la largeur de la frontière, je n'ai pas rencontré le problème. Quand ils étaient les mêmes que je recevais les coins carrés.
En utilisant la boussole et SASS vous pouvez facilement y parvenir comme ceci:
@import "compass";
#border-radius {
@include border-radius('RADIUS'px); }
#gradiant{
$experimental-support-for-svg: true;
@include background-image(linear-gradient('COLOR') %,('COLOR') %,...; }
Compass va générer une image SVG pour vous.
comme ceci:
#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;
}
Travaux 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%);
