鳄鱼可能不是正确的词;我欢迎对标题进行更正.
我希望容器能够像下图中那样有鳄鱼边框.
如果所讨论的元素具有纯背景,则可以使用伪元素欺骗或CSS3边界图像.然而,在这种情况下,容器的内容是非重复图案.
或者,图像本身可以具有边界.但是,由于图像扩展的方式(用于显示图像的动画),这是不可能的.
我能想到的唯一选择是SVG.
解决方法
根据您的向后兼容性要求,CSS3 border-image属性可能适合.
见：http://www.w3.org/TR/css3-background/#border-images
它们适用于所有浏览器的最新版本：http://caniuse.com/#search=border-image
最后,这是一个与他们一起玩的工具：http://border-image.com/
更新：
只要图像背后的背景具有纯色背景,边框图像就可以工作.
只需包含一个内部< div>与锯齿边界.
HTML
<div class="image">
<div class="sawtooth"></div>
</div>
CSS
BODY {
background: black;
}
DIV.image {
width: 480px;
height: 325px;
background: url(http://i.imgur.com/ux7a7pi.jpg);
}
DIV.sawtooth {
width: 426px;
height: 271px;
}
.sawtooth {
border-style: solid;
border-width: 27px;
border-image: url(http://i.imgur.com/Usmr9yF.png) 27 round;
}
