使用纯色边框和透明png创建css嘈杂边框

在制作网站时，我经常使用透明的png（f.I.创建），使设计更具材质和真实感

现在，我正在设计一个也大量使用边框的设计，所以我想知道是否有可能以同样的方式添加纹理。 （i.o.w.定义实体边框并用png覆盖它（png是透明的，因此它必须适应先前指定的纯色））

据我所知，不能用

边框图像

这样做，因为浏览器会忽略纯色。（我最好不要为此设置固定颜色的边框图像）

这项工作也可以使用嵌套的div来完成，但这会减少语义，我必须修改一些Joomla视图

此外，假设我有一个100x100px的png（与背景相同），我如何设置它，使其不调整大小并保持比例，或使边框获得一些意外的过渡（如由于图案错位而产生的假想线）

---

不管怎样，有其他人的建议吗？（css带噪边框）

您可以在伪元素之前或之后使用

，将图像放置在原始元素上，将纯色放置在伪元素上（反之亦然）

类似这样的内容（使用不透明模式：）：


div{
宽度：100px；
高度：100px；
边框宽度：24px；
边框图像：url(http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif）24重复；
}
部门：之后{
内容：“；
宽度：100px；
高度：100px；
边框：24px实心rgba（0,255,255,8）；
显示：块；
利润率：-24px；
}
如果想法是在
背景中使用纯彩色
，则可以通过
框阴影：插入
轻松绘制，同时设置嘈杂的背景和透明边框以查看其下方

如果背景是图像，则
背景剪辑
将有所帮助。

这两个例子都依赖于背景图像中设置的透明边界和噪声模式