Promień graniczny IE9 i krwawienie gradientu tła


191

IE9 najwyraźniej jest w stanie obsługiwać zaokrąglone rogi za pomocą standardowej definicji CSS3 border-radius.

Co z obsługą promienia granicy i gradientu tła? Tak, IE9 ma obsługiwać je oba osobno, ale jeśli pomieszacie oba gradient spadnie z zaokrąglonego rogu.

Widzę też dziwność z cieniami ukazującymi się jako jednolita czarna linia pod pudełkiem z zaokrąglonymi narożnikami.

Oto obrazy pokazane w IE9:

obraz bez spadów, ale z ostrymi narożnikami obraz z krwawieniem

Jak mogę obejść ten problem?


Dzięki za wskazówki @MikeP i @meanstreakuk. Wydaje mi się, że odpowiedź, której szukam, jest bardziej zgodna z tym, kiedy IE naprawdę będzie obsługiwać gradienty / zaokrąglanie lub jak sprawić, by te dwa działały razem.
SigmaBetaTooth

Odpowiedź od @meanstreak pokazuje, jak zmusić 2 do współpracy. Jeśli chcesz być realistyczny, gradienty SVG jako obrazy tła są znacznie bardziej prawdopodobne, że będą w pełni obsługiwane przez wszystkie przeglądarki znacznie wcześniej niż gradienty css (które są nadal intensywnie rozwijane / dyskutowane).
Kevin Peno,

29
Niewiarygodne stwardnienie rozsiane jest tak daleko w tyle. Jest 2011 rok, a IE wciąż zajmuje się tego rodzaju problemami. zzzzzzz. .. na swojej stronie mówią: „szybko jest teraz piękne”. Jasne, że tak. Spójrz na zdjęcia zamieszczone powyżej. CZYM PROSTOKĄTNE PIĘKNO!
SunnyRed

SunnyRed, no cóż, w elementach Chrome zawartych w czymś o zaokrąglonych rogach spadają rogi. Naprawdę, to 2012 rok, a przeglądarki wciąż mają do czynienia z tego rodzaju problemami :-)
Joey,

2
@SunnyRed It 2013 teraz, a błąd nadal występuje :(
Sliq

Odpowiedzi:


49

Oto jedno rozwiązanie, które dodaje gradient tła, używając identyfikatora URI danych do utworzenia półprzezroczystego obrazu, który nakłada się na dowolny kolor tła. Zweryfikowałem, że jest prawidłowo przycięty do promienia krawędzi w IE9. Jest to lżejsze niż propozycje oparte na SVG, ale jako minus, nie jest niezależne od rozdzielczości. Kolejna zaleta: działa z obecnym HTML / CSS i nie wymaga pakowania dodatkowych elementów.

Przechwyciłem losowy gradient PNG 20x20 za pomocą wyszukiwania w sieci i przekonwertowałem go na identyfikator URI danych za pomocą narzędzia online. Wynikowy identyfikator URI danych jest mniejszy niż kod CSS dla całego bałaganu SVG, a tym bardziej samego SVG! (Możesz zastosować to warunkowo do IE9 tylko przy użyciu stylów warunkowych, specyficznych dla przeglądarki klas css itp.) Oczywiście, generowanie PNG działa świetnie dla gradientów wielkości przycisku, ale nie gradientów wielkości strony!

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
Zwycięzcą jest ... Myślę, że jeśli muszę wybrać jedną, to jest to. Miałem nadzieję zobaczyć więcej informacji na temat tego, kiedy IE rzeczywiście będzie obsługiwać to, co mówi, że obsługuje. Jeśli chodzi o rozwiązanie dla obrazu tła, nie chcę pobierać obrazów, aby IE się zachowywał. Dziękujemy wszystkim za pomocne sugestie.
SigmaBetaTooth

1
Odkryłem, że ustawienie background-size: 100% 103%; background-position:center;jest lepsze. 100% dla obu wartości dodaje dziwne obramowanie na górze i na dole.
Morten Christiansen

Dodanie rozmiaru tła: 100% 103%; pozycja tła: środek; nic dla mnie nie robi.
Gregory Bolkenstijn

2
Nie jesteś pewien, dlaczego używasz URI danych, a nie tylko obrazu? Myślę, że obraz oznaczałby dodatkowe wywołanie do serwera dla ie9 użytkowników, ale wysyłanie wszystkich tych dodatkowych znaków do przeglądarek innych niż ie9 wydaje się marnotrawstwem. Rozwiązanie działa dla mnie jako obraz, chciałbym wyjaśnienia.
Decoy

4
Jego ręczny identyfikator URI danych jest tym, co zwykle robi preprocesor CSS podczas wdrażania. Jak na „ale jaki to brzydki hack”, to kardynalne bzdury. SVG jest obrazem jak każdy inny, choć wektorowym. Więc nazwanie SVG hackiem i zaproponowanie zamiast niego PNG jest absolutnie bez sensu. Dlaczego SVG jest lepszy? Niezależność od rozdzielczości, ten sam powód, dla którego używasz promienia obramowania zamiast zrasteryzowanego tła obrazu.
skrat 13.03.12

104

Pracowałem również z tym problemem. Innym „rozwiązaniem” jest dodanie div wokół przedmiotu, który ma gradient i zaokrąglone rogi. Niech div ma taką samą wysokość, szerokość i zaokrąglone wartości narożne. Ustaw przepełnienie na ukryte. To jest po prostu maska, ale działa dla mnie.

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
Działa to dla mnie idealnie i jest znacznie prostsze niż inne proponowane rozwiązania.
Simon P. Stevens,

Znacznie łatwiej niż obecnie akceptowana odpowiedź. To działa w IE9 dla mnie.
Andy McCluggage

To działa ... tak smutno i żałośnie. To jest przeglądarka „HTML5” !? Dlaczego nie jestem podekscytowany IE10.
Todd Vance

@toddv Nie martw się. Wkrótce wszystko się skończy. Niedługo, ale wkrótce. Zobacz daringfireball.net/linked/2012/07/04/windows-hegemony Przy odrobinie szczęścia nikt nigdy nie będzie musiał się martwić o wsparcie IE12 ... może IE14 - robi się niewyraźnie.
jinglesthula

2
Tylko drobna uwaga, ale oświadczenia o promieniu obramowania powinny zostać odwrócone, aby promować kompatybilność do przodu. Dokonałem edycji.
Parris

44

Myślę, że warto wspomnieć, że w wielu przypadkach można użyć wstawionego cienia do „fałszowania” efektu gradientu i unikania brzydkich krawędzi w IE9. Działa to szczególnie dobrze z przyciskami.

Zobacz ten przykład: http://jsfiddle.net/jancbeck/CJPPW/31/

Porównanie stylu przycisku z gradientem liniowym lub cieniem


2
Doskonała poprawka w moim przypadku, ponieważ użyłem tego tylko na przycisku i potrzebowałem gradientu tak, jak narysowałeś. Użyłem na razie komentarzy warunkowych dla gte IE9, a następnie zastosowałembox-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

elegancki i prosty. i ++.
Eliran Malka

1
+1 za myślenie nieszablonowe. Działa wyjątkowo dobrze zarówno dla kart, jak i przycisków. Użycie wstawki utrzymuje gradient wewnątrz elementu.
GlennG,

To najlepsze rozwiązanie, jakie widziałem. Czysty css, nie wymaga dodatkowych elementów ani obrazów.
Zaqx,

1
fajna sztuczka, ale mam gradienty na całej stronie. nie mogę zmienić ich wszystkich na głupie tj.
Mehmet Fatih Yıldız

8

Aby rozwiązać ten problem, możesz także użyć narzędzia CSS3 PIE.

http://css3pie.com/

Oczywiście może to być przesada, jeśli zależysz tylko od jednego elementu z zaokrąglonymi narożnikami i gradientem tła, ale można rozważyć, czy wprowadzasz na swoich stronach wiele typowych funkcji CSS3 i chcesz łatwego wsparcia dla IE6 +


1
nawet z css3pie i ie9 nie widzę gradientu. Widzę zaokrąglone rogi i cień, ale nie ma gradientu.
Kevin

7

Na ten błąd też wpadłem. Moją sugestią byłoby użycie powtarzanego obrazu tła dla gradientu w ie9. IE9 poprawnie umieszcza obraz za zaokrąglonymi krawędziami (od wersji RC1).

Nie widzę, jak napisanie 100 linii kodu w celu zastąpienia 1 linii CSS jest proste lub eleganckie. SVG jest w porządku, ale po co przechodzić przez to wszystko, skoro od lat istnieją łatwiejsze rozwiązania dla gradientowego tła.


5

Utknąłem również w tym samym problemie i stwierdziłem, że IE nie może renderować promienia granicy i gradientu jednocześnie, oba konflikty, jedynym sposobem rozwiązania tego problemu jest usunięcie filtra i użycie gradientu za pomocą kodu svg, tylko dla IE ..

możesz pobrać kod svg, używając ich kodu koloru gradientu, z witryny Microsoft (specjalnie dla gradientu do svg):

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

cieszyć się :)


Link już nie jest prawidłowy.
zmiażdżyć

5

Wystarczy użyć div otoki (zaokrąglone i ukryte przepełnienie), aby przyciąć promień dla IE9. Prosty, działa w różnych przeglądarkach. Komentarze SVG, JS i warunkowe są niepotrzebne.

<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

Ten post na blogu pomógł mi: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

Zasadniczo używasz komentarza warunkowego, aby usunąć filtr, a następnie tworzysz „duszki” SVG gradientów, które możesz wykorzystać jako obrazy tła.

Prosty i elegancki!


Żyję tym Szczególnie duże ulepszenia za pomoc w KOŃCU kończenia poszukiwań dotyczących tworzenia duszków za pomocą SVG. Ponieważ SVG jest skalowalny, a duszki są możliwe, uważam, że paczki SVG są znacznie bardziej podatne niż gradienty css i, jak powiedziałem powyżej, prawdopodobnie zobaczą 100% wsparcie w przeglądarkach na długo przed gradientami CSS.
Kevin Peno,

Och, jedyną rzeczą, którą do tego dodam, jest to, że obecnie webkit i, jak sądzę, opera obsługuje również SVG w url()wywołaniach obrazów CSS . Pozostało tylko jedno przytrzymanie, więc upuść 1000 warunków i podaj SVG dla bg na wszystkich, którzy go obsługują. Dla wszystkich innych podaj pospieszny obraz. Wtedy ten hack staje się możliwy do zarządzania.
Kevin Peno,

4

IE9 poprawnie obsługuje promień krawędzi i gradienty. Problem polega na tym, że IE9 czyni filtr odpowiednim oprócz gradientu. Sposobem na prawidłowe rozwiązanie tego problemu jest wyłączenie filtrów w deklaracjach stylu, które wykorzystują właściwość filter.

Jako przykład najlepszego rozwiązania tego problemu:

W głównym arkuszu stylów masz klasę przycisków.

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

W warunkowym arkuszu stylów IE9:

.btn { filter: none; }

Dopóki arkusz stylów IE9 jest przywoływany w twojej głowie po głównym arkuszu stylów, będzie to działało idealnie.


2
ie9 nie renderuje gradientów liniowych
James Westgate

3

Istnieje prosty sposób, aby działał pod IE9 tylko z JEDNYM elementem.

Spójrz na to skrzypce: http://jsfiddle.net/bhaBJ/6/

Pierwszy element ustawia promień obramowania. Drugi pseudoelement ustawia gradient tła.

Kilka kluczowych instrukcji:

  • rodzic musi mieć pozycję względną lub bezwzględną
  • rodzic musi mieć przepełnienie: ukryty ; (aby efekt promienia granicy był widoczny)
  • Pseudoelement :: before (lub :: after) musi mieć indeks Z: -1 (rodzaj obejścia)

Deklaracja elementu podstawowego przebiega mniej więcej tak:

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

Deklaracja pseudoelementowa:

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

}

Po prostu perfekcyjnie! Dzięki! :)
majimekun

W twoim przykładzie ustawiłem promień obramowania na 20, a obramowania nie są przycinane w IE9
zmiażdż

Spróbuj ustawić to w swoim nagłówku: <meta http-equiv = "X-UA-Compatible" content = "IE = 9" />
Marakoss

2

Postanowiłem wyłączyć IE9 z zaokrąglania narożników, aby obejść ten błąd. Jest czysty, łatwy i ogólny w użyciu.

{
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

Div maski w IE9 jest dobrym pomysłem. Dostarczam kompletny kod, aby trochę wyjaśnić. Chociaż nie jestem zadowolony z zawinięcia przycisku w DIV, myślę, że łatwiej to zrozumieć niż osadzanie maski PNG lub przechodzenie przez cały wysiłek przy użyciu SVG. Może IE 10 będzie go obsługiwał poprawnie.

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

Robił mi to i po usunięciu linii „filtr:” krwawienie ustąpiło. Plus używam SROKI.

Krwawienia:

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

Nie krwawi:

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

Szybka poprawka Shadow 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

Możesz użyć cienia, aby uzyskać gradient, i będzie działać na Internet Explorerze 9border-radius

Coś takiego:

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

0

Nie jestem pewien, czy to było jednorazowe, czy prawidłowe obejście, ale ...

Odkryłem, że pod warunkiem, że promień granicy jest większy niż szerokość granicy, nie napotkałem problemu. Kiedy były takie same, miałem kwadratowe rogi.


0

Za pomocą kompasu i sassa możesz łatwo to osiągnąć w następujący sposób:

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

Kompas wygeneruje dla Ciebie obraz SVG.

tak:

#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

Pracuje dla mnie...

<!--[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%);
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.