关于如何使用 CSS 来模拟凌乱的邮票有什么想法吗？
我对渲染看起来像其中之一的跨度的方法感兴趣：
这里是我计划使用的技巧：
@font-face-{moz/webkit/o}-transform:rotate
这是一个个人项目，所以假设最现代的 CSS 支持是美好的。也许边框图像可以提供帮助？我想避免到处都是图像拼接——如果真的是这样的话，我会跳过所有边框并依靠字体来实现外观。
我只是好奇这里的 CSS 专家会如何解决这个问题。
更新
现在有一个 CSS 属性，mask-image。更多信息请此处。
I'm interested in ways to render a span that to look something like one of these:
Here are the tricks I plan on using:
@font-face-{moz/webkit/o}-transform:rotate
It's for a personal project so assuming the most modern CSS support is fine. Maybe border-images could help? I'd like to avoid image splicing all over the place -- if it really comes down to that I'll just skip the border all together and rely on a font for the look.
I'm just curious how the CSS gurus around here would approach this.
UPDATE
There is now a CSS property for this, mask-image. More here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您可以使用字体作为字体，但仍然需要图像作为边框。我建议您省去跨浏览器调试的麻烦，并在可能的情况下使用透明的 .png。
You could use a font face for the font, but you'd still need an image for the borders. I would suggest saving yourself the hassle of cross browser debugging and using a transparent .png if possible.
对于垃圾外观没有特定的 CSS 解决方案。您必须依靠字体或图像（例如某种与字体顶部的背景颜色相匹配的“蹩脚”斑点图案）。
唯一可能适用的其他 CSS 是使用 RGBA 颜色，设置为大约 80 或 90% 的不透明度，以允许您可能使用的任何背景图案渗透出来，就像真正的墨水印章的情况一样。
我喜欢尽可能多地使用 CSS，但对于特定的外观，我会坚持使用图像。图像仍然有其用途。 ;o)
There is no specific css solution for the grunge look. You'll have to rely on a typeface for that, or an image (such as some sort of 'grungy' splotch pattern that matches the background color on top of the type).
The only other CSS that might be applicable is to use an RGBA color set to perhaps 80 or 90% opacity to allow a bit of whatever background pattern you might use seep through as would be the case with a real ink stamp.
I love doing as much as I can with CSS, but for that specific look, I'd stick with an image. Images still serve a purpose. ;o)
这个现在看起来很有希望：
http://codepen.io/c3f3l0/pen/Fwzoc
使用goole字体
this one looks promising now:
http://codepen.io/c3f3l0/pen/Fwzoc
use goole fonts
您可以使用 CSS 对文本应用垃圾效果。
就支持而言，我只能说，我已经在最新的 Chrome、Firefox、IE、Opera、Safari 以及各种移动浏览器和不同的操作系统中对其进行了测试，并且它可以在我测试过的所有浏览器中运行。
CSS
HTML
这是一个小提琴
You can use CSS to apply a grunge effect on text.
As far as support goes all I can say is that I've tested it in latest Chrome, Firefox, IE, Opera, Safari as well as various mobile browsers and and diferent OS and it works in all of the ones I've tested on.
CSS
HTML
Here's a fiddle
您可以通过导入（http://www.font-face.com/）类似于 http://www.fontspace.com/category/stamp。
我不确定你是否可以用纯 CSS 来制作边框。您可以在邮票上添加仿旧透明覆盖层，这将使其看起来不错，并且不需要自定义字体。
CSS可用于创建双图章边框，CSS双边框+轮廓。您需要将外边框颜色设为白色，内边框颜色与轮廓颜色相同。轮廓应比边框粗。
You can achieve the distressed font effect by importing (http://www.font-face.com/) a font similar to http://www.fontspace.com/category/stamp.
I am not sure if you can do the border with plain CSS. You can add a distressed transparent overlay over your stamp which will make it look good, and will not require the custom font.
CSS can be used to create the double stamp border with CSS double border + outline. You need to make the outer border color white, and the inner and outline colors the same. The outline should be thicker than the border.