0

我正在使用 CSS3，并且正在创建一个带有切角的盒子。

这是代码：

.boxcornerscutted {
background: #ffffff;
background:
    -moz-linear-gradient(45deg,  transparent 10px, #ffffff 10px),
    -moz-linear-gradient(135deg, transparent 10px, #ffffff 10px),
    -moz-linear-gradient(225deg, transparent 10px, #ffffff 10px),
    -moz-linear-gradient(315deg, transparent 10px, #ffffff 10px);
background:
    -o-linear-gradient(45deg,  transparent 10px, #ffffff 10px),
    -o-linear-gradient(135deg, transparent 10px, #ffffff 10px),
    -o-linear-gradient(225deg, transparent 10px, #ffffff 10px),
    -o-linear-gradient(315deg, transparent 10px, #ffffff 10px);
background:
    -webkit-linear-gradient(45deg,  transparent 10px, #ffffff 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #ffffff 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #ffffff 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #ffffff 10px);

padding:9px 9px;
margin-top: -30px;
margin-bottom: -15px;
}

div.boxcornerscutted {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
     background-size: 50% 50%;
     background-repeat: no-repeat;
}

它在 Chrome、Opera、Safari、Mozilla 上完美运行，但在 IE 上（显然）有问题。任何提示如何在 IE 上重新创建相同（或类似效果）？

4

2 回答 2

1

渐变不适用于 IE 6/7/8/9。尝试使用http://css3pie.com/

CSS3 PIE使 Internet Explorer 6-9 能够呈现几个最有用的 CSS3 装饰功能。

查看渐变模式和代码示例的演示，http://css3pie.com/demos/gradient-patterns/

于 2012-11-04T10:08:57.170 回答
1

它可以使用 JavaScript 和jQuery corner来实现，但不能使用纯 CSS。

这-ms-linear-gradient是最接近 IE 等价物的东西，但它仅受 IE10 支持。

早期的 IE 版本支持使用filter:progid:DXImageTransform.Microsoft.gradient( ... );和的简单渐变filter:ms-linear-gradient( ... );，但不支持这种渐变。

于 2012-11-04T10:12:41.157 回答