Question

我正在玩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上重新创建相同（或类似的效果）？

Answer 1

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

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

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

Answer 2

使用JavaScript和jQuery corner可以实现这一点，但在纯CSS中则不然。

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

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

切割角落的盒子不在IE上工作

2 个答案: