IE9 perbatasan-radius dan pendarahan gradien latar belakang

191

IE9 tampaknya mampu menangani sudut bulat dengan menggunakan definisi standar CSS3 border-radius.

Bagaimana dengan dukungan untuk radius batas dan gradien latar belakang? Ya IE9 adalah untuk mendukung keduanya secara terpisah, tetapi jika Anda mencampur keduanya gradien berdarah keluar dari sudut membulat.

Saya juga melihat keanehan dengan bayangan yang ditampilkan sebagai garis hitam solid di bawah kotak dengan sudut bulat.

Berikut adalah gambar yang ditunjukkan di IE9:

gambar tanpa perdarahan, tetapi sudut tajam gambar dengan berdarah

Bagaimana saya bisa mengatasi masalah ini?

SigmaBetaTooth
sumber
Terima kasih atas tips @MikeP dan @meanstreakuk. Saya kira jawaban yang saya cari lebih sesuai kapan IE akan benar-benar mendukung gradien / pembulatan atau bagaimana saya membuat keduanya bekerja bersama.
SigmaBetaTooth
Anda mendapat jawaban dari @meanstreak untuk cara membuat 2 bekerja bersama. Jika Anda ingin realistis, gradien SVG sebagai gambar latar jauh lebih mungkin didukung penuh oleh semua browser lebih cepat daripada gradien css (yang masih dalam pengembangan / diskusi berat).
Kevin Peno
29
MS yang luar biasa begitu jauh di belakang. Ini tahun 2011 dan IE masih berurusan dengan masalah seperti ini. zzzzzzz. ..pada situs mereka, mereka berkata: "fast is now beautiful". Tentu saja. Lihatlah gambar-gambar yang diposting di atas. APA KEINDAHAN RECTANGULAR!
SunnyRed
SunnyRed, well, dalam elemen Chrome yang terkandung dalam sesuatu dengan sudut membulat berdarah di sudut. Sungguh, ini tahun 2012 dan browser masih berurusan dengan masalah semacam ini :-)
Joey
2
@ SunnyRed It 2013 sekarang dan bug masih ada :(
Sliq

Jawaban:

49

Inilah salah satu solusi yang menambahkan gradien latar belakang, menggunakan data URI untuk membuat gambar semi-transparan yang menutupi semua warna latar belakang. Saya telah memverifikasi bahwa itu terpotong dengan benar ke radius perbatasan di IE9. Ini lebih ringan daripada proposal berbasis SVG tetapi sebagai downside, tidak bebas resolusi. Keuntungan lain: bekerja dengan HTML / CSS Anda saat ini dan tidak memerlukan pembungkus dengan elemen tambahan.

Saya mengambil PNG gradien 20x20 acak melalui pencarian web, dan mengubahnya menjadi data URI menggunakan alat online. Data yang dihasilkan URI lebih kecil dari kode CSS untuk semua kekacauan SVG itu, apalagi SVG itu sendiri! (Anda dapat menerapkan ini secara kondisional untuk IE9 hanya menggunakan gaya kondisional, kelas css khusus browser, dll.) Tentu saja, menghasilkan PNG berfungsi baik untuk gradien ukuran tombol, tetapi bukan gradien ukuran halaman!

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
sumber
1
Dan pemenangnya adalah ... Saya kira jika saya harus memilih satu, ini dia. Saya berharap untuk melihat lebih banyak informasi ketika IE benar-benar mendukung apa yang dikatakannya mendukung. Adapun solusi gambar latar belakang, saya sebagian untuk tidak menarik gambar untuk membuat IE berperilaku. Terima kasih semuanya atas saran mereka yang bermanfaat.
SigmaBetaTooth
1
Saya menemukan pengaturan background-size: 100% 103%; background-position:center;yang lebih baik. 100% untuk kedua nilai menambahkan batas aneh di bagian atas dan bawah.
Morten Christiansen
Menambahkan ukuran latar: 100% 103%; posisi latar belakang: tengah; tidak melakukan apa pun untuk saya.
Gregory Bolkenstijn
2
Tidak yakin mengapa Anda menggunakan data uri dan bukan hanya gambar? Saya kira gambar akan berarti panggilan tambahan ke server untuk pengguna ie9, tetapi untuk mengirim semua karakter tambahan ke browser non-ie9 tampaknya boros. Solusi berfungsi bagi saya sebagai gambar, pasti suka penjelasannya.
Umpan
4
URI data manualnya adalah apa yang biasanya dilakukan beberapa preprosesor CSS selama waktu penggunaan. Pada "tapi apa jenis hack jelek itu", itu omong kosong kardinal. SVG adalah gambar seperti yang lain, meskipun satu vektor. Jadi menyebut SVG sebagai peretasan, dan mengusulkan PNG sebagai gantinya adalah mutlak tidak masuk akal. Mengapa SVG lebih baik? Resolusi kemerdekaan, alasan yang sama Anda menggunakan jari-jari perbatasan bukan latar belakang gambar raster.
skrat
104

Saya juga telah menangani masalah ini. "Solusi" lain adalah menambahkan div di sekitar item yang memiliki sudut gradien dan bulat. Buat div itu sama tinggi, lebar, dan nilai sudut bulat. Atur overflow menjadi tersembunyi. Ini pada dasarnya hanya topeng, tetapi itu bekerja untuk saya.

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 */
}
pengguna740128
sumber
3
Ini berfungsi dengan baik untuk saya dan jauh lebih sederhana daripada solusi yang diusulkan lainnya.
Simon P Stevens
Jauh lebih mudah daripada jawaban yang saat ini diterima. Ini berfungsi di IE9 untuk saya.
Andy McClrolley
Ini berhasil ... sangat menyedihkan dan menyedihkan. Ini adalah browser 'HTML5' !? Mengapa saya tidak bersemangat tentang IE10.
Todd Vance
@toddv Jangan khawatir. Semuanya akan segera berakhir. Tidak cukup cepat, tapi segera. Lihat daringfireball.net/linked/2012/07/04/windows-hegemoni Dengan sedikit keberuntungan, tidak ada yang perlu khawatir tentang mendukung IE12 ... mungkin IE14 - itu bisa kabur.
jinglesthula
2
Hanya catatan kecil, tetapi pernyataan radius perbatasan Anda harus dibalik untuk mempromosikan kompatibilitas ke depan. Saya membuat edit.
Parris
44

Saya pikir itu layak disebutkan bahwa dalam banyak kasus Anda dapat menggunakan kotak-bayangan inset untuk "memalsukan" efek gradien dan menghindari tepi jelek di IE9. Ini bekerja sangat baik dengan tombol.

Lihat contoh ini: http://jsfiddle.net/jancbeck/CJPPW/31/

Perbandingan gaya tombol dengan gradien linier atau bayangan kotak

Jan Beck
sumber
2
Perbaikan yang sangat baik dalam kasus saya karena saya menggunakan ini hanya pada tombol dan membutuhkan gradien seperti yang Anda gambar. Saya menggunakan komentar bersyarat untuk gte IE9 untuk sekarang dan kemudian diterapkanbox-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
elegan dan sederhana. i ++.
Eliran Malka
1
+1 untuk berpikir di luar kotak. Berfungsi sangat baik untuk tab maupun tombol. Menggunakan inset menjaga gradien di dalam elemen.
GlennG
Ini adalah solusi terbaik yang pernah saya lihat. Css murni, tidak memerlukan elemen tambahan, atau gambar.
Zaqx
1
trik yang bagus tetapi saya memiliki gradien di seluruh situs. saya tidak bisa mengubah mereka semua yaitu bodoh.
Mehmet Fatih Yıldız
8

Anda juga dapat menggunakan PIE CSS3 untuk mengatasi masalah ini:

http://css3pie.com/

Tentu saja, itu mungkin berlebihan jika Anda hanya bergantung pada satu elemen dengan sudut bulat dan gradien latar belakang, tetapi itu adalah opsi untuk dipertimbangkan jika Anda memasukkan sejumlah fitur CSS3 umum pada halaman Anda dan ingin dukungan yang mudah untuk IE6 +

Louis L.
sumber
1
bahkan dengan css3pie dan ie9, saya tidak melihat gradien. Saya melihat sudut membulat dan drop shadow, tetapi tidak ada gradien.
Kevin
7

Saya juga menemukan bug ini. Saran saya adalah menggunakan gambar latar yang diulang untuk gradien di ie9. IE9 dengan benar mem-tile image di belakang batas-batas bulat (seperti pada RC1).

Saya gagal melihat bagaimana menulis 100 baris kode untuk menggantikan 1 baris CSS sederhana atau elegan. SVG memang keren dan semuanya, tetapi mengapa harus melalui semua itu ketika solusi yang lebih mudah untuk latar belakang gradien telah ada selama bertahun-tahun.

MikeP
sumber
5

Saya juga terjebak dalam masalah yang sama dan menemukan bahwa IE tidak dapat membuat radius perbatasan dan gradien pada satu waktu, keduanya konflik, satu-satunya cara untuk mengatasi sakit kepala ini adalah dengan menghapus filter dan menggunakan gradien melalui kode svg, hanya untuk IE ..

Anda bisa mendapatkan kode svg dengan menggunakan kode warna gradien mereka, dari Microsoft situs ini (khusus dibuat untuk gradien ke svg):

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

Nikmati :)

Himanshu Jani
sumber
Tautan tidak lagi valid.
naksir
5

Cukup gunakan wrapper div (rounded & overflow hidden) untuk memotong radius untuk IE9. Sederhana, berfungsi lintas browser. SVG, JS, dan komentar kondisional tidak diperlukan.

<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
sumber
4

Posting blog ini membantu saya: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Pada dasarnya, Anda menggunakan komentar bersyarat untuk menghapus filter dan kemudian membuat SVG 'sprite' dari gradien yang dapat Anda gunakan sebagai gambar latar belakang.

Sederhana dan elegan!

Dan Herd
sumber
Saya menjalani ini. Terutama para petinggi karena membantu saya AKHIRNYA akhiri pencarian saya tentang cara membuat sprite menggunakan SVG. Karena SVG adalah skala, dan sprite dimungkinkan, saya menemukan paket sprite SVG jauh lebih fleksibel daripada gradien css dan, seperti saya katakan di atas, kemungkinan akan melihat dukungan 100% di browser jauh sebelum gradien CSS.
Kevin Peno
Oh, satu-satunya hal yang ingin saya tambahkan adalah bahwa saat ini webkit dan, saya percaya, opera juga mendukung SVG dalam url()panggilan gambar CSS . Hanya satu yang tersisa, dengan demikian, lepaskan 1000 kondisional dan sajikan SVG untuk bg pada semua yang mendukungnya. Untuk semua orang, sajikan gambar raster. Kemudian retasan ini menjadi dikelola.
Kevin Peno
4

IE9 menangani radius batas dan gradien bersama dengan benar. Masalahnya adalah bahwa IE9 membuat filter tepat selain gradien. Cara untuk menyelesaikannya dengan benar adalah dengan menonaktifkan filter pada deklarasi gaya yang memanfaatkan properti filter.

Sebagai contoh cara terbaik mengatasi ini:

Anda memiliki kelas tombol di stylesheet utama Anda.

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

Dalam stylesheet IE9 bersyarat:

.btn { filter: none; }

Selama stylesheet IE9 direferensikan di kepala Anda setelah stylesheet utama Anda ini akan bekerja dengan sempurna.

WFendler
sumber
2
ie9 tidak membuat gradien linier
James Westgate
3

Ada cara sederhana untuk membuatnya bekerja di bawah IE9 hanya dengan SATU elemen.

Lihatlah biola ini: http://jsfiddle.net/bhaBJ/6/

Elemen pertama mengatur Border-Radius. Elemen pseudo kedua mengatur Background Gradient.

Beberapa petunjuk utama:

  • orang tua harus memiliki posisi relatif atau absolut
  • induk harus mengalami overflow: disembunyikan ; (agar efek perbatasan-jari terlihat)
  • :: before (atau :: after) pseudo-element harus memiliki indeks-z: -1 (jenis penyelesaian)

Deklarasi elemen dasar berjalan seperti:

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

Deklarasi Pseudo-Elemen:

.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
sumber
Sempurna! Terima kasih! :)
majimekun
Saya menetapkan batas-radius ke 20 dalam contoh Anda, dan perbatasan tidak terpotong di IE9
naksir
Cobalah atur ini di tajuk Anda: <meta http-equiv = "Kompatibel dengan X-UA" content = "IE = 9" />
Marakoss
2

Saya memutuskan untuk menonaktifkan IE9 dari sudut pembulatan untuk mengatasi bug ini. Ini bersih, mudah dan dapat digunakan secara umum.

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

Topeng div di IE9 adalah ide yang bagus. Saya menyediakan beberapa kode lengkap untuk membantu memperjelas sedikit. Sementara saya tidak senang dengan membungkus tombol dalam DIV, saya pikir itu lebih mudah dipahami daripada menanamkan topeng PNG atau melalui semua upaya menggunakan SVG. Mungkin IE 10 akan mendukungnya dengan benar.

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

Sedang melakukan ini untuk saya dan begitu saya menghapus "filter:" baris perdarahan hilang. Plus saya menggunakan PIE.

Berdarah:

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

Tidak berdarah:

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

Perbaiki IE Shadow Cepat:

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
sumber
1

Anda bisa menggunakan bayangan untuk mencapai gradien, dan akan bekerja di Internet Explorer 9 denganborder-radius

Sesuatu seperti ini:

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

Tidak yakin apakah ini salah satu atau solusi yang valid tapi ...

Saya menemukan bahwa asalkan radius perbatasan lebih besar dari lebar perbatasan, saya tidak mengalami masalah. Ketika mereka sama saya mendapatkan sudut persegi.

tanah papa
sumber
0

Menggunakan kompas dan sass Anda dapat dengan mudah mencapai ini seperti ini:

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

Kompas akan menghasilkan gambar SVG untuk Anda.

seperti itu:

#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
sumber
0

Bekerja untuk saya ...

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

sumber