IE9圆角和CSS背景渐变一起生活吗？
|
我在IE9中遇到了一件奇怪的事情，试图显示背景渐变。
基本上，我将多个类应用于容器对象。
<div class=\"gradient corners\"></div>
.gradient {
background-color: #96A7C5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, #6C86AD),
color-stop(0.6, #96A7C5)
);
background-image: -moz-linear-gradient(
center bottom,
#75A33A 19%,
#8DC447 60%
);
.corners {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#8DC447\', endColorstr=\'#75A33A\');
<!--[if IE]>
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=\'#8DC447\', endColorstr=\'#75A33A\');
<![endif]-->
没有找到相关结果
已邀请:
5 个回复
抢垢洛韧
并为.corners隐藏溢出.corners { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; overflow: hidden; }熊融炭臀陛
块。 只需在样式声明中放入所有3（4，如果您同时包含两个IE）规则，浏览器将仅选择他们理解的规则。 一个例子：.gradient { background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */ background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #4477a1),color-stop(1,#81a8cb)); /* Safari & Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=\'#81a8cb\', endColorstr=\'#4477a1\'); /* IE6 & IE7 */ -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=\'#81a8cb\', endColorstr=\'#4477a1\')\"; /* IE8 */ }泪琉踞檄
邵酮
.someElement { behavior: url(assets/js/PIE.htc); border-radius: 10px; background: #8cb2d1; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYjJkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iIzQwODBiMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, #8cb2d1 0%, #4080b3 42%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cb2d1), color-stop(42%,#4080b3)); background: -webkit-linear-gradient(top, #8cb2d1 0%,#4080b3 42%); background: -o-linear-gradient(top, #8cb2d1 0%,#4080b3 42%); background: -ms-linear-gradient(top, #8cb2d1 0%,#4080b3 42%); background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%); -pie-background: linear-gradient(top, #8cb2d1 0%,#4080b3 42%); }烫珊
<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 */ }