Internet explorer CSS3 IE9支持

我正在尝试在不使用图像的情况下创建锯齿状边缘边界，我希望仍然支持IE9和更高版本。这可能吗？到目前为止，它在除IE9之外的所有领域都有效。任何建议都很好！非常感谢

这是我正在使用的代码

<div class='demo'></div>


/* Jagged Edge */
 div {
    background: linear-gradient(-135deg, #fff 10px, transparent 0) 0 10px, linear-gradient(135deg, #fff 10px, #333 0) 0 10px;
    background-color: #fff;
    background-size: 20px 20px;

    /* otherwise these will be overridden when you add the inline styles with js. */
    background-position: left bottom !important;
    background-repeat: repeat-x !important;

    padding:1em;
    width:100%;
 }

/*锯齿状边缘*/
div{
背景：线性梯度（-135度，#FFF10px，透明0）010px，线性梯度（135度，#FFF10px，#3330）010px；
背景色：#fff；
背景尺寸：20px 20px；
/*否则，在使用js添加内联样式时，这些样式将被覆盖*/
背景位置：左下角！重要；
背景重复：重复-x！重要；
填充：1em；
宽度：100%；
}

这是一个JSFIDLE

---

我考虑将数据uri与SVG结合使用。对此有何想法？我不知道该怎么办

对于

数据uri

svg，将其放在CSS中：

background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiCXZpZXdCb3g9IjAgMCAyMCAxNSIgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7ZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMCAxNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gZmlsbD0iIzMyMzIzMiIgcG9pbnRzPSIxMCwwIDIwLDEwIDIwLDE1IDAsMTUgMCwxMCAiLz48L3N2Zz4NCg==');

我通过在Adobe Illustrator中绘制路径、导出为SVG、对SVG进行base64编码并将其插入到

data:image/SVG+xml

中获得了该字符串

---

请参见此演示。

为什么没有图像？你不能使用一个带有

png

的数据uri吗？我尝试在没有图像的情况下使用它，但我认为IE9不支持它可能的给定线性梯度。你认为这样更好还是这样。。。？progid:DXImageTransform.Microsoft.gradient（startColorstr='#333'，endColorstr='#333'，GradientType=1）很有趣。我从没听说过那种

progid:DXImageTransform.Microsoft.gradient

的东西。我将测试这两个，看看是什么呈现。。。我在等一台电脑测试。非常感谢你提供的信息！