반응형
IE9 테두리 반지름 및 배경 경사 출혈
은 IE9는 CSS3의 할 수 .border-radius.
경계 반경 및 배경 경사도 지원은 어떻습니까?예, IE9는 둘 다 개별적으로 지원하지만, 두 가지를 혼합하면 둥근 모서리에서 그라데이션 블리딩이 나옵니다.
모서리가 둥근 상자 아래에 검은색 실선으로 그림자가 나타나는 이상함도 보입니다.
IE9에 표시된 이미지는 다음과 같습니다.
어떻게 하면 이 문제를 해결할 수 있습니까?
저도 이 문제를 해결하고 있습니다.또 다른 "해결책"은 경사각과 둥근 모서리를 가진 항목 주위에 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 */
}
데이터 URI를 사용하여 배경색을 오버레이하는 반투명 이미지를 만드는 배경 그라데이션을 추가하는 솔루션이 있습니다.IE9에서 국경 반경에 맞게 잘린 것을 확인했습니다.이는 SVG 기반 제안보다 가볍지만 단점으로는 해결책에 의존하지 않습니다.또 다른 장점은 현재 HTML/CSS와 함께 작동하며 추가 요소로 래핑할 필요가 없다는 것입니다.
웹 검색을 통해 무작위로 20x20 그라데이션 PNG를 획득하고 온라인 툴을 사용하여 데이터 URI로 변환했습니다.결과 데이터 URI는 SVG 자체는 말할 것도 없고 모든 SVG 혼란에 대한 CSS 코드보다 작습니다! (이것은 조건부 스타일, 브라우저별 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;
}
대부분의 경우 내장된 상자 그림자를 사용하여 기울기 효과를 "가짜"하고 IE9의 보기 흉한 가장자리를 피할 수 있다는 점을 언급할 가치가 있다고 생각합니다.이 기능은 특히 단추에 적합합니다.
다음 예를 참조하십시오. http://jsfiddle.net/jancbeck/CJPPW/31/
CSS3 PIE를 사용하여 이 문제를 해결할 수도 있습니다.
물론 모서리가 둥글고 배경 기울기가 있는 단일 요소에 의존하는 경우 오버킬이 될 수 있지만, 페이지에 일반적인 CSS3 기능을 다수 통합하고 IE6+에 대한 쉬운 지원을 원하는지 고려하는 옵션입니다.
저도 이 벌레를 만났어요.제 제안은 ie9의 그라데이션에 반복되는 배경 이미지를 사용하는 것입니다.IE9는 반올림된 테두리 뒤에 이미지를 올바르게 타일링합니다(RC1 기준).
나는 CSS의 한 줄을 대체하기 위해 100줄의 코드를 쓰는 것이 얼마나 간단하거나 우아한지 이해하지 못합니다.SVG는 멋지지만, 그라데이션 배경에 대한 더 쉬운 솔루션이 몇 년 동안 존재해 왔는데 왜 그런 일을 겪습니까?
저는 또한 같은 문제에 빠져 IE가 경계 반경과 기울기를 동시에 렌더링할 수 없다는 것을 발견했습니다. 둘 다 충돌합니다. 이 문제를 해결하는 유일한 방법은 필터를 제거하고 IE에 대해 svg 코드를 통해 기울기를 사용하는 것입니다.
Microsoft 이 사이트(특히 그라데이션에서 svg로 제작)에서 그라데이션 색상 코드를 사용하여 svg 코드를 얻을 수 있습니다.
http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
즐기세요 :)
래퍼 디브(반올림 및 오버플로 숨김)를 사용하여 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 '스프라이트'를 생성합니다.
심플하고 우아합니다!
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/ .
첫 번째 요소는 경계-반경을 설정합니다.두 번째 유사 요소는 배경 그라데이션을 설정합니다.
몇 가지 주요 지침:
- 부모는 상대적 또는 절대적 위치를 가져야 합니다.
- 상위 항목에는 오버플로가 있어야 합니다. 숨김; (경계선 효과를 표시하려면)
- ::이전(또는 ::이후) 의사-벡터에는 z-index: -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);
}
IE9의 마스크 디바인은 좋은 생각입니다.조금 더 명확하게 하기 위해 완전한 코드를 제공합니다.DIV에 버튼을 싸는 것이 마음에 들지 않지만, SVG를 사용하여 PNG 마스크를 넣거나 모든 노력을 하는 것보다 이해하기가 더 쉽다고 생각합니다.아마도 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 */
제게 이렇게 하고 있었는데 "필터:" 라인을 제거하자 출혈이 사라졌습니다.게다가 저는 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(' '));
}
});
}
}
그림자를 사용하여 그라데이션을 달성할 수 있으며 Internet Explorer 9에서 작업할 예정입니다.border-radius
이와 같은 것:
box-shadow: inset 0px 0px 26px 5px gainsboro;
이것이 일회성인지 아니면 유효한 해결책인지는 확실하지 않지만...
경계 반지름이 경계 폭보다 크면 문제가 발생하지 않습니다.그것들이 똑같을 때 나는 사각형 모서리를 얻고 있었습니다.
나침반과 sass를 사용하면 다음과 같이 쉽게 달성할 수 있습니다.
@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%);
언급URL : https://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding
반응형
'programing' 카테고리의 다른 글
| 메이븐 종단을 사용하여 스프링 활성 종단을 설정하는 방법 (0) | 2023.08.17 |
|---|---|
| jQuery를 사용하여 텍스트를 변경하는 방법 (0) | 2023.08.17 |
| Twitter 부트스트랩 3 스티커 바닥글 (0) | 2023.08.17 |
| jQuery - 다중: 선택기 아님 (0) | 2023.08.17 |
| Ajax 호출 후 페이지 새로 고침을 중지하는 방법은 무엇입니까? (0) | 2023.08.17 |