รัศมีของเส้นขอบ IE9 และการไล่ระดับสีพื้นหลัง

IE9 เห็นได้ชัดคือความสามารถที่จะจัดการกับมุมโค้งมนโดยใช้นิยาม CSS3 border-radiusมาตรฐาน

แล้วการรองรับรัศมีชายแดนและการไล่สีพื้นหลังล่ะ? ใช่ IE9 นั้นรองรับทั้งสองอย่างแยกกัน แต่ถ้าคุณผสมสองสีไล่ระดับสีออกจากมุมมน

ฉันยังเห็นความแปลกประหลาดกับเงาที่แสดงเป็นเส้นทึบสีดำใต้กล่องที่มีมุมโค้งมน

นี่คือภาพที่แสดงใน IE9:

ฉันจะแก้ไขปัญหานี้ได้อย่างไร

นี่คือโซลูชันหนึ่งที่เพิ่มการไล่ระดับสีพื้นหลังโดยใช้ URI ข้อมูลเพื่อสร้างภาพกึ่งโปร่งใสที่ซ้อนทับสีพื้นหลังใด ๆ ฉันตรวจสอบแล้วว่ามันตัดอย่างถูกต้องกับรัศมีเส้นขอบใน IE9 สิ่งนี้มีน้ำหนักเบากว่าข้อเสนอแบบ SVG แต่มีข้อเสียไม่ใช่ความละเอียด ข้อได้เปรียบอีกประการหนึ่ง: ทำงานร่วมกับ HTML / CSS ปัจจุบันของคุณและไม่จำเป็นต้องมีองค์ประกอบเพิ่มเติม

ฉันจับ PNG ไล่ระดับสีแบบสุ่ม 20x20 ผ่านการค้นหาเว็บและแปลงเป็น URI ข้อมูลโดยใช้เครื่องมือออนไลน์ URI ของข้อมูลที่ได้นั้นเล็กกว่าโค้ด CSS สำหรับระเบียบ SVG ทั้งหมดซึ่งน้อยกว่า SVG มาก! (คุณสามารถใช้เงื่อนไขนี้กับ IE9 โดยใช้รูปแบบที่มีเงื่อนไขคลาส css เฉพาะเบราว์เซอร์เป็นต้น) แน่นอนว่าการสร้าง PNG นั้นใช้งานได้ดีสำหรับการไล่ระดับสีของปุ่ม

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

ฉันยังทำงานกับปัญหานี้ "วิธีแก้ปัญหา" อีกวิธีหนึ่งคือการเพิ่ม div รอบรายการที่มีการไล่ระดับสีและมุมโค้งมน ทำให้ div นั้นมีความสูงความกว้างและค่ามุมโค้งมนเท่ากัน ตั้งค่าโอเวอร์โฟลว์เป็นซ่อน นี่เป็นเพียงหน้ากาก แต่ใช้งานได้สำหรับฉัน

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

ฉันคิดว่ามันคุ้มค่าที่จะกล่าวถึงว่าในหลาย ๆ กรณีคุณสามารถใช้เงาใส่กล่องเพื่อ "ไล่" เอฟเฟกต์การไล่ระดับสีและหลีกเลี่ยงขอบที่น่าเกลียดใน IE9 ใช้ได้ดีกับปุ่ม

ดูตัวอย่างนี้: http://jsfiddle.net/jancbeck/CJPPW/31/

คุณสามารถใช้ CSS3 PIE เพื่อแก้ไขปัญหานี้:

http://css3pie.com/

แน่นอนว่าอาจเกินความจริงหากคุณเพียงแค่ขึ้นอยู่กับองค์ประกอบเดียวที่มีมุมโค้งมนและการไล่ระดับพื้นหลัง แต่เป็นตัวเลือกที่จะต้องพิจารณาหากคุณรวมคุณสมบัติ CSS3 ทั่วไปจำนวนมากบนหน้าเว็บของคุณและต้องการการสนับสนุนอย่างง่ายดาย สำหรับ IE6 +

ฉันพบปัญหานี้เช่นกัน ข้อเสนอแนะของฉันจะใช้ภาพพื้นหลังซ้ำสำหรับการไล่ระดับสีใน ie9 IE9 ทำการเรียงภาพอย่างถูกต้องหลังเส้นขอบที่โค้งมน (เช่น RC1)

ฉันล้มเหลวในการดูว่าการเขียนโค้ด 100 บรรทัดเพื่อแทนที่ CSS 1 บรรทัดนั้นง่ายหรือสง่างาม SVG นั้นยอดเยี่ยมและทั้งหมด แต่ทำไมต้องผ่านทุกสิ่งเมื่อโซลูชันที่ง่ายขึ้นสำหรับพื้นหลังแบบไล่ระดับสีนั้นมีมานานหลายปีแล้ว

ฉันยังติดอยู่ในปัญหาเดียวกันและพบว่า IE ไม่สามารถแสดงรัศมีเส้นขอบและการไล่ระดับสีทั้งสองครั้งมันขัดแย้งกันวิธีเดียวที่จะแก้ปัญหาปวดหัวนี้คือการลบตัวกรองและใช้การไล่ระดับสีด้วยรหัส svg สำหรับ IE เท่านั้น ..

คุณสามารถรับรหัส svg โดยใช้รหัสสีไล่ระดับสีจาก Microsoft ไซต์นี้ (ทำขึ้นเป็นพิเศษสำหรับการไล่ระดับสีเป็น svg):

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

สนุก :)

เพียงใช้ div wrapper (ซ่อนส่วนโค้งมน & ล้น) เพื่อตัดรัศมีสำหรับ IE9 ง่ายทำงานข้ามเบราว์เซอร์ SVG, JS และความคิดเห็นตามเงื่อนไขไม่จำเป็น

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

การโพสต์บล็อกนี้ช่วยฉัน: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

โดยทั่วไปคุณใช้ความคิดเห็นตามเงื่อนไขเพื่อลบตัวกรองแล้วสร้าง SVG 'sprites' ของการไล่ระดับสีซึ่งคุณสามารถใช้เป็นภาพพื้นหลังได้

เรียบง่ายและสง่างาม!

IE9 จัดการรัศมีเส้นขอบและการไล่ระดับสีเข้าด้วยกันอย่างเหมาะสม ปัญหาคือ IE9 แสดงตัวกรองที่เหมาะสมนอกเหนือจากการไล่ระดับสี วิธีแก้ไขปัญหานี้อย่างถูกต้องคือปิดใช้งานตัวกรองในการประกาศลักษณะที่ใช้คุณสมบัติตัวกรอง

เป็นตัวอย่างในการแก้ปัญหานี้ให้ดีที่สุด:

คุณมีคลาสปุ่มในสไตล์ชีทหลักของคุณ

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

ในสไตล์ชีท IE9 แบบมีเงื่อนไข:

.btn { filter: none; }

ตราบใดที่สไตล์ชีท IE9 ถูกอ้างอิงในหัวของคุณหลังจากสไตล์ชีทหลักของคุณจะทำงานได้อย่างสมบูรณ์แบบ

มีวิธีง่าย ๆ ในการทำให้ทำงานภายใต้ IE9 ด้วยองค์ประกอบเดียว

ดูซอนี้: http://jsfiddle.net/bhaBJ/6/

องค์ประกอบแรกตั้งค่า Border-Radius องค์ประกอบที่สองหลอกกำหนดพื้นหลังไล่ระดับ

คำแนะนำที่สำคัญบางประการ:

• ผู้ปกครองจะต้องมีตำแหน่งสัมพัทธ์หรือตำแหน่งที่แน่นอน
• ผู้ปกครองจะต้องมีมากเกินไป: ซ่อนอยู่ ; (เพื่อให้สามารถเห็นเอฟเฟกต์เส้นขอบรัศมี)
• :: ก่อน (หรือ :: หลัง) องค์ประกอบหลอกจะต้องมีดัชนี z: -1 (ชนิดของการแก้ปัญหา)

การประกาศองค์ประกอบพื้นฐานมีลักษณะดังนี้:

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

การประกาศองค์ประกอบปลอม:

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

}

ฉันตัดสินใจที่จะปิดการใช้งาน IE9 จากการปัดเศษเพื่อแก้ไขข้อผิดพลาดนี้ มันสะอาดง่ายและใช้งานได้ทั่วไป

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

div div ใน IE9 เป็นความคิดที่ดี ฉันกำลังส่งรหัสที่สมบูรณ์เพื่อช่วยให้ชัดเจนขึ้น ในขณะที่ฉันไม่มีความสุขกับการห่อปุ่มใน DIV ฉันคิดว่ามันง่ายกว่าที่จะเข้าใจมากกว่าการฝังหน้ากาก PNG หรือใช้ความพยายามทั้งหมดโดยใช้ SVG บางที IE 10 จะรองรับอย่างถูกต้อง

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

กำลังทำสิ่งนี้กับฉันและเมื่อฉันลบ "ตัวกรอง:" บรรทัดเลือดออกก็หายไป บวกฉันใช้พาย

เลือด:

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

ไม่ตก:

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

Quick IE Shadow 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(' '));
        }
    });
}

}

คุณสามารถใช้เงาเพื่อไล่ระดับสีและจะทำงานบน Internet Explorer 9 ด้วยborder-radius

บางสิ่งเช่นนี้

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

ไม่แน่ใจว่านี่เป็นการปิดหรือการแก้ไขที่ถูกต้อง แต่ ...

ฉันพบว่าหากรัศมีของเส้นขอบมีค่ามากกว่าความกว้างของเส้นขอบฉันไม่พบปัญหานี้ เมื่อพวกเขาเหมือนกันฉันก็ได้มุมที่สอง

การใช้เข็มทิศและเขี้ยวช่วยให้คุณทำสิ่งนี้ได้อย่างง่ายดาย

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

เข็มทิศจะสร้างภาพ SVG สำหรับคุณ

ชอบมาก:

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

}

ใช้งานได้สำหรับฉัน ...

<!--[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%);