Html 梯度+；IE9中的圆角CSS问题

在我当前的项目中，我在CSS文件中使用了CSS3渐变。为了支持IE浏览器，我还使用了filter属性。以下是我的代码：

.card.active .content.back {
  background: #333; /* Old browsers */
  background: -moz-linear-gradient(top, #333 0%, #0e0e0e 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #333 0%,#0e0e0e 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #333 0%,#0e0e0e 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */

}

但是当我在上面的代码中使用

过滤器

属性时，

边界半径

属性不起作用。如果有人知道这个问题的解决方法，请与我分享

---

谢谢

您应该能够将渐变应用于具有圆角的元素的子元素。我无法在家用计算机上访问IE9，但这应该可以：

.element {
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
    border-radius: 10px;
}
.element .ie-helper {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}

HTML:

你的内容与梯度和圆角

如果在IE10+或其他浏览器中查看页面，渐变和圆角都将应用于同一元素（假设您从代码示例中返回特定于供应商的前缀）。内部

div.ie-helper

将仅在IE9及以下版本上渲染，因为使用了

---

这并不理想，但可以完成这项工作，但由于您需要广泛的浏览器以获得完全支持，因此这是一个合理的解决方案

您应该能够将渐变应用于具有圆角的元素的子元素。我无法在家用计算机上访问IE9，但这应该可以：

.element {
    background: linear-gradient(top, #333 0%,#0e0e0e 100%); /* W3C */
    border-radius: 10px;
}
.element .ie-helper {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#0e0e0e',GradientType=0 );
}

HTML:

你的内容与梯度和圆角

如果在IE10+或其他浏览器中查看页面，渐变和圆角都将应用于同一元素（假设您从代码示例中返回特定于供应商的前缀）。内部

div.ie-helper

将仅在IE9及以下版本上渲染，因为使用了

---

这并不理想，但可以完成任务，但由于您需要广泛的浏览器以获得完全支持，因此这是一个合理的解决方法，您可以使用PIE.htc来获得所需的结果

PIE代表渐进式Internet Explorer。它是一种IE附加行为，当应用于元素时，允许IE识别和显示许多CSS3属性

PIE目前为IE 6至8添加了以下CSS3功能的全部或部分支持：

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

此外，PIE为IE9添加了对边界图像和线性渐变的支持，IE9已经在本地支持其他功能

http://css3pie.com/

或观看演示：

---

对于support PIE.htc，您必须将PIE.htc文件保存在根文件夹中，这样才能用于您的网站。…

您可以使用PIE.htc获得所需的结果

PIE代表渐进式Internet Explorer。它是一种IE附加行为，当应用于元素时，允许IE识别和显示许多CSS3属性

PIE目前为IE 6至8添加了以下CSS3功能的全部或部分支持：

border-radius
box-shadow
border-image
multiple background images
linear-gradient as background image

此外，PIE为IE9添加了对边界图像和线性渐变的支持，IE9已经在本地支持其他功能

http://css3pie.com/

或观看演示：

---

对于support PIE.htc，您必须将PIE.htc文件保存在根文件夹中，这样才能为您的网站提供支持……

Hi@Shailender:我已经在使用CSS3Pie了，但问题是，当我将其与

filter

属性一起使用时，div区域在IE9中没有获得border radius属性。虽然谢谢你的回答，你知道一种方法来应用边界半径的容器使用过滤器获得梯度背景Thanks@Mujahid如果您使用的是CSS3PIE，那么您不需要使用任何类型的过滤器，因为通过PIE.htc，您可以获得如下所有结果：-边界半径，IE中的框阴影和渐变以及它对IE6到IE9的支持……如果你有其他解决方案，为什么要使用filter属性？@Shailendar:实际上是以前的开发人员使用的filter属性，我不知道他为什么这样做。当我将鼠标悬停在网页上时，出现了一个问题，使用

filter

属性背景的容器变为白色。所以我删除了

filter

属性，并使用PIE.htc解决了这个问题。但在我的应用程序中，div区域是-8度变换的。当我使用PIE.htc时，转换度得到了改变，只需为ie制作一个单独的样式表，然后在该样式表中应用这个东西……感谢我加入，希望我能得到答案thrHi@Shailender：我已经在使用CSS3Pie了，但问题是，当我将它与

过滤器

属性一起使用时，div区域未获取IE9中的border radius属性。虽然谢谢你的回答，你知道一种方法来应用边界半径的容器使用过滤器获得梯度背景Thanks@Mujahid如果您使用的是CSS3PIE，那么您不需要使用任何类型的过滤器，因为通过PIE.htc，您可以获得如下所有结果：-边界半径，IE中的框阴影和渐变以及它对IE6到IE9的支持……如果你有其他解决方案，为什么要使用filter属性？@Shailendar:实际上是以前的开发人员使用的filter属性，我不知道他为什么这样做。当我将鼠标悬停在网页上时，出现了一个问题，使用

filter

属性背景的容器变为白色。所以我删除了

filter

属性，并使用PIE.htc解决了这个问题。但在我的应用程序中，div区域是-8度变换的。当我使用PIE.htc时，转换度得到了改变，只需为ie制作一个单独的样式表，然后在该样式表中应用这个东西…谢谢我加入，希望我能得到答案