-1

我正在尝试在不使用图像的情况下制作锯齿状边缘边框，并且我仍然希望支持 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%;
 }

这是一个jsfiddle ... http://jsfiddle.net/26uW4/1/

我考虑过使用带有 SVG 的 data-uri。对此有什么想法？我不确定如何做到这一点。

4

1 回答 1

0

至于data-urisvg，把它放在你的 CSS 中：

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

我通过在 Adob​​e Illustrator 中绘制路径、导出为 SVG、base64 编码 svg 并将其插入到data:image/svg+xml.

有关工作演示，请参阅此JSFiddle 。

于 2013-11-14T04:04:45.200 回答