IE9 테두리 반경 및 배경 그라디언트 출혈


191

IE9는의 CSS3 표준 정의를 사용하여 둥근 모서리를 처리 할 수 ​​있습니다 border-radius.

테두리 반경 배경 그라디언트 지원은 어떻습니까? 예 IE9는 둘 다 별도로 지원하지만 둘을 혼합하면 둥근 모서리에서 그라디언트가 번집니다.

둥근 모서리가있는 상자 아래에 그림자가 검은 색 선으로 표시되는 이상한 점이 있습니다.

IE9에 표시된 이미지는 다음과 같습니다.

블리드가 없지만 날카로운 모서리가있는 이미지 출혈이있는 이미지

이 문제를 어떻게 해결할 수 있습니까?


팁 @MikeP 및 @meanstreakuk에 감사드립니다. IE가 진정으로 그라디언트 / 반올림을 지원할 것인지 또는 두 사람이 함께 작동하게하는 방법에 대한 답은 내가 찾고있는 대답에 달려 있다고 생각합니다.
SigmaBetaTooth

2를 함께 사용하는 방법에 대한 @meanstreak의 답변이 있습니다. 현실적이기를 원한다면 배경 이미지로서의 SVG 그라디언트는 CSS 그라디언트 (여전히 개발 / 토론이 진행중인)보다 훨씬 빨리 모든 브라우저에서 완전히 지원 될 가능성이 높습니다.
케빈 페노

29
믿을 수없는 MS는 지금까지 뒤쳐져 있습니다. 2011 년이며 IE는 여전히 이런 종류의 문제를 처리하고 있습니다. zzzzzzz. .. 그들의 사이트에서 "빠른 지금은 아름답습니다"라고 말합니다. 당연히 그렇지. 위에 게시 된 사진을보십시오. 장엄한 아름다움?
SunnyRed

모서리가 둥근 모서리에있는 크롬 요소의 SunnyRed는 모서리에 번집니다. 실제로, 그것은 2012 년이며 브라우저는 여전히 이런 종류의 문제를 처리하고 있습니다 :-)
Joey

2
@SunnyRed 그것은 지금 2013 년 버그가 여전히있다 :(
Sliq

답변:


49

다음은 데이터 URI를 사용하여 배경 그라데이션을 추가하는 반투명 이미지를 만드는 배경 그라데이션을 추가하는 한 가지 솔루션입니다. IE9에서 테두리 반경에 올바르게 클리핑되었는지 확인했습니다. 이것은 SVG 기반 제안보다 가볍지 만 단점은 해상도 독립적이지 않습니다. 또 다른 장점 : 현재 HTML / CSS에서 작동하며 추가 요소로 줄 바꿈 할 필요가 없습니다.

웹 검색을 통해 임의의 20x20 그라디언트 PNG를 가져 와서 온라인 도구를 사용하여 데이터 URI로 변환했습니다. 결과 데이터 URI는 모든 SVG 혼란에 대한 CSS 코드보다 작으며 SVG 자체보다 훨씬 적습니다! (조건부 스타일, 브라우저 별 CSS 클래스 등을 사용하여 IE9에만 조건부로 적용 할 수 있습니다.) 물론 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;
}

1
그리고 승자는 ... 하나를 골라야한다고 생각합니다. IE가 실제로 지원하는 것을 실제로 지원할 때 더 많은 정보를보고 싶었습니다. 배경 이미지 솔루션의 경우 IE를 작동시키기 위해 이미지를 가져 오지 않는 것이 부분적입니다. 유용한 제안에 감사드립니다.
SigmaBetaTooth

1
설정 background-size: 100% 103%; background-position:center;이 더 낫다는 것을 알았습니다 . 두 값 모두 100 %이면 위쪽과 아래쪽에 이상한 테두리가 추가됩니다.
Morten Christiansen

배경 크기 추가 : 100 % 103 %; 배경 위치 : 센터; 나를 위해 아무것도하지 않습니다.
Gregory Bolkenstijn

2
왜 이미지가 아닌 데이터 URI를 사용하는지 확실하지 않습니까? 나는 이미지가 ie9 사용자를 위해 서버에 대한 추가 호출을 의미한다고 생각하지만, 추가 문자를 비 ie9 브라우저로 보내면 낭비가되는 것 같습니다. 해결책은 이미지로 나를 위해 일하고 있으며 설명을 좋아할 것입니다.
Decoy

4
그의 수동 데이터 URI는 일부 CSS 프리 프로세서가 일반적으로 배치 시간 동안 수행하는 것입니다. "그러나 추악한 해킹의 종류는 무엇입니까?", 그것은 추기경 헛소리입니다. SVG는 벡터이지만 다른 이미지입니다. 따라서 SVG를 핵이라고 부르고 대신 PNG를 제안하는 것은 절대 의미가 없습니다. SVG가 더 나은 이유는 무엇입니까? 래스터 화 된 이미지 배경 대신 테두리 반지름을 사용하는 것과 같은 이유로 해상도 독립성.
skrat

104

나는 또한이 문제로 일하고있다. 또 다른 "솔루션"은 그라디언트 및 둥근 모서리가있는 항목 주위에 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 */
}

3
이것은 나에게 완벽하게 작동하며 다른 제안 된 솔루션보다 훨씬 간단합니다.
Simon P Stevens

현재 허용되는 답변보다 훨씬 쉽습니다. 이것은 IE9에서 나를 위해 작동합니다.
Andy McCluggage

이것은 매우 슬프고 한심한 일입니다. 이것이 'HTML5'브라우저입니다!? IE10에 대해 왜 흥분하지 않습니까?
토드 밴스

@toddv 걱정하지 마십시오. 곧 끝날 것입니다. 빨리는 아니지만 곧. 참조 daringfireball.net/linked/2012/07/04/windows-hegemony 운, 아무도 IE12 지원에 대해 걱정할 필요가 없습니다 ... 어쩌면 IE14 - 그것의 퍼지를 얻을.
jinglesthula

2
포워드 호환성을 높이기 위해 약간의주의 사항이 있지만 경계 반경 설명을 반대로해야합니다. 편집했습니다.
Parris

44

많은 경우에 삽입 상자 그림자를 사용하여 그라디언트 효과를 "가짜"로 만들고 IE9에서 못생긴 가장자리를 피할 수 있다고 언급 할 가치가 있다고 생각합니다. 이것은 특히 버튼과 잘 작동합니다.

이 예를 참조하십시오 : http://jsfiddle.net/jancbeck/CJPPW/31/

선형 그라디언트 또는 상자 그림자와 버튼 스타일 비교


2
버튼에만 사용하고 그림과 같이 그라디언트가 필요했기 때문에 내 경우에 탁월한 수정. 나는 지금까지 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);
gte

우아하고 간단합니다. i ++.
Eliran Malka

1
상자 밖에서 생각하면 +1. 버튼뿐만 아니라 탭에도 매우 효과적입니다. 삽입을 사용하면 요소 내부의 그라데이션이 유지됩니다.
GlennG

이것이 내가 본 최고의 솔루션입니다. 순수한 CSS, 추가 요소 또는 이미지가 필요하지 않습니다.
Zaqx

1
좋은 트릭이지만 사이트 전체에 그라디언트가 있습니다. 나는 바보 같은 즉 그들 모두를 변경할 수 없습니다.
Mehmet Fatih Yıldız

8

CSS3 PIE를 사용하여이 문제를 해결할 수도 있습니다.

http://css3pie.com/

물론 둥근 모서리와 배경 그라디언트가있는 단일 요소에만 의존한다면 페이지에 많은 공통 CSS3 기능을 통합하고 쉽게 지원하려는 경우 고려하는 옵션입니다. IE6 + 용


1
css3pie 및 ie9에서도 그라디언트가 표시되지 않습니다. 둥근 모서리와 그림자가 있지만 그라디언트는 보이지 않습니다.
Kevin

7

나는이 버그에 부딪쳤다. 내 제안은 ie9의 그라데이션에 반복되는 배경 이미지를 사용하는 것입니다. IE9는 둥근 테두리 뒤에 이미지를 올바르게 바둑판 식으로 배열합니다 (RC1 기준).

CSS의 한 줄을 대체하기 위해 100 줄의 코드를 작성하는 것이 간단하거나 우아하다는 것을 보지 못했습니다. SVG는 시원하고 모든 것이지만, 왜 그라디언트 배경에 대한 더 쉬운 솔루션이 수년간 주변에있을 때 모든 것을 통과해야합니까?


5

나는 또한 IE가 국경 반경과 그라디언트를 한 번에 둘 다 렌더링 할 수 없다는 것을 발견했다. 단지 IE를 위해 ..

이 사이트의 Microsoft에서 그라데이션 색상 코드를 사용하여 svg 코드를 얻을 수 있습니다 (특히 그라데이션을 위해 svg로 만들었습니다).

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

즐겨 :)


더 이상 링크가 유효하지 않습니다.
분쇄

5

IE9의 반경을 자르려면 래퍼 div (반올림 및 오버플로 숨김)를 사용하십시오. 간이 브라우저 간 작동합니다. 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 */ 
}

4

이 블로그 게시물이 도움이되었습니다 : http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/

기본적으로 조건부 주석을 사용하여 필터를 제거한 다음 배경 이미지로 사용할 수있는 그라디언트의 SVG '스프라이트'를 만듭니다.

간단하고 우아한!


나는 이것을 산다. SVG를 사용하여 스프라이트를 만드는 방법에 대한 검색을 최종적으로 끝내는 데 도움이되는 특히 큰 업적. SVG는 확장 가능하고 스프라이트가 가능하기 때문에 SVG 스프라이트 팩은 CSS 그라디언트보다 훨씬 다재다능하다는 것을 알았습니다. 위에서 언급했듯이 CSS 그라디언트 이전에는 브라우저에서 100 % 지원을 볼 수 있습니다.
케빈 페노

오, 내가 추가 할 것은 현재 웹킷이며 오페라는 CSS 이미지 url()호출 에서 SVG도 지원한다는 것 입니다. 단 하나의 왼쪽 만 잡고 있으므로 1000 개의 조건을 삭제하고이를 지원하는 모든 bg에 대해 SVG를 제공합니다. 다른 사람에게는 래스터 이미지를 제공하십시오. 그러면이 핵은 다루기 쉬워집니다.
케빈 페노

4

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 스타일 시트가 기본 스타일 시트 다음에 머릿속에서 참조되는 완벽하게 작동합니다.


2
IE9는 선형 그라디언트를 렌더링하지 않습니다
제임스 웨스트 게이트에게

3

IE9에서 단 하나의 요소로 작동하게하는 간단한 방법이 있습니다.

이 바이올린을 살펴보십시오 : http://jsfiddle.net/bhaBJ/6/

첫 번째 요소는 Border-Radius를 설정합니다. 두 번째 의사 요소는 배경 그라디언트를 설정합니다.

몇 가지 주요 지침 :

  • 부모는 상대 또는 절대 위치 가 있어야합니다
  • 부모는 오버플로가 있어야합니다 . hidden ; (경계 반경 효과가 보이도록)
  • :: 의사 요소 이전 (또는 :: 이후)에는 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 );

}

완벽 해! 감사! :)
majimekun

나는 당신의 예에서 20 경계 반경을 설정하고 테두리 IE9에서 클리핑되지 않습니다
호감

헤더에 이것을 설정하십시오 : <meta http-equiv = "X-UA-Compatible"content = "IE = 9"/>
Marakoss

2

이 버그를 해결하기 위해 반올림 코너에서 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);
}

1

IE9의 마스크 div는 좋은 생각입니다. 약간의 설명을 돕기 위해 완전한 코드를 제공하고 있습니다. 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>

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

나에게 이것을하고 있었는데 일단 "filter :"라인을 제거하면 출혈이 사라졌습니다. 또한 PIE를 사용합니다.

출혈 :

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

빠른 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

그림자 를 사용 하여 그라디언트를 얻을 수 있으며 Internet Explorer 9에서border-radius

이 같은:

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

0

이것이 일회용인지 유효한 해결 방법인지 확실하지 않지만 ...

테두리 반경이 테두리 너비보다 크면 문제가 발생하지 않습니다. 그들이 같았을 때 나는 사각형 모퉁이를 얻고 있었다.


0

나침반과 낭을 사용하면 다음과 같이 쉽게 달성 할 수 있습니다.

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

}


0

나를 위해 작동합니다 ...

<!--[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%);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.