CSS锯齿形边框和带纹理的背景

CSS锯齿形边框和带纹理的背景

如果要使用

border-image

，那么它不是跨浏览器的解决方案，因为IE不支持它。

另外，即使当前的所有浏览器版本（除IE9之外）都支持CSS渐变（这将允许您获得 Zig-
zag模式
）和

border-image

，上次我检查（这是几个月前，所以最好再次进行测试），渐变

border-image

仅适用于WebKit。另外，我不认为即使在WebKit中，它也可以用于多个渐变（因为您只能设置一个边框图像，而一个渐变就是一幅图像），并且曲折图案需要两个渐变。

CSS之字形模式的代码为：

background: linear-gradient(#BCED91 49%, transparent 49%),        linear-gradient(-45deg, white 33%, transparent 33%) 0 50%,        white linear-gradient(45deg, white 33%, #BCED91 33%) 0 50%;    background-repeat: repeat-x;    background-size: 1px 100%, 40px 40px, 40px 40px;

如果您想要一个与此下方同步的纹理，则必须确保它以相同的间隔重复（

40px

，但您也可以使用

20px

）。

---