html - 木炭/模拟像使用 CSS3 的边框效果

Question

有没有办法用 CSS3 绘制“像木炭一样”的边框？这些线条在许多模型工具中很受欢迎，因为它们象征着设计阶段的工作。

例如图片在这里

http://balsamiq.com/products/mockups

• 线可能不是直的并且有一些“扭曲”

• 线条有魄力

• 画笔效果:线条中可能包含单独的白色像素

Answer 1

Variant 打败了我，但正如他所提到的，您可以使用 border-image 属性创建非常相似的效果。示例:

http://hertzen.com/experiments/css-charcoal-borders/ (它只是对所有元素使用一个图像)

在我的方法中，边框图像的外位是 white 的颜色，因此将 background-color 应用于元素将为其内部元素的内容着色，留下外位 white。如果您需要让它在多种不同的背景颜色上工作(要求您在 border-image 内外都具有透明度)，那么您可以在当前元素后面创建一个元素，该元素位于边框，并在那里分配 background-color。