[英]IE9 filter gradient and border-radius conflict
I'm trying to use gradient effect and border radius on same element, but there is a conflict between them. 我试图在同一个元素上使用渐变效果和边框半径,但它们之间存在冲突。 Gradient works fine, but it makes border radius not working.
渐变工作正常,但它使边框半径不起作用。
here is the script 这是脚本
.selector {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4317',endColorstr='#891a00');
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
I don't want to use any .htc
files. 我不想使用任何
.htc
文件。
Is this known issue between filter and border radius? 这是过滤器和边界半径之间的已知问题吗?
Thanks. 谢谢。
You can use an SVG gradient, here's an example that works in IE9 with a border-radius
: http://jsfiddle.net/thirtydot/Egn9A/ 您可以使用SVG渐变,这是一个在IE9中使用
border-radius
的示例: http : //jsfiddle.net/thirtydot/Egn9A/
To generate the SVG gradient, use: http://www.colorzilla.com/gradient-editor/ . 要生成SVG渐变,请使用: http : //www.colorzilla.com/gradient-editor/ 。 You don't mention trying to make it work in other browsers/versions of IE, but if that's what you're trying to do (you might be because you're using
filter
), use the method described in the "IE9 Support" section. 您没有提及尝试使其在IE的其他浏览器/版本中工作,但如果您正在尝试这样做(可能是因为您正在使用
filter
),请使用“IE9支持”中描述的方法部分。
Another site to generate SVG gradients: http://ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html 另一个生成SVG渐变的网站: http : //ie.microsoft.com/testdrive/graphics/svggradientbackgroundmaker/default.html
Use these classes for border radius and gradient 将这些类用于边框半径和渐变
HTML Code: HTML代码:
<div class="box-radius ">border radius with gradient</div>
CSS Code: CSS代码:
.box-radius {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
/* behavior: url(border-radius.htc); */
}
.gradient {
background-image: -moz-linear-gradient(top, #ff4317, #891a00); /* Firefox 3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #ff4317),color-stop(1, #891a00)); /* Safari & Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ff4317',endColorstr='#891a00')"; /* IE8 */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.