css - 带有切 Angular 的框在 IE 上不起作用

Question

我正在玩 CSS3，我正在创建一个带切 Angular 的盒子。

代码如下:

.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

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

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

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