使用CSS渐变创建拉丝金属字母

gradients inside heading text on the web assume that doing so requires that the text be rendered as bitmap image, neccessitating an increase in file size and download time while lowering 渐变的设计人员都认为，这样做需要将文本呈现为位图图像，从而需要增加文件大小和下载时间，同时降低 accessibility and 可访问性和 SEO. SEO 。

It is possible to create a brushed metal effect with CSS alone: the one drawback is that the gradient is only currently visible in Webkit and Blink browsers.

可以仅使用CSS来创建拉丝金属效果：一个缺点是渐变仅在Webkit和Blink浏览器中当前可见。

h1 {
	font-family: Origin, Helvetica Light, sans-serif;
	text-transform: uppercase;
	font-size: 4rem;
	color: rgb(255,242,181);
	background-image: linear-gradient(rgb(255,242,181) 28%, 
		rgb(77,77,77) 40%,
		rgb(255,242,181) 54%);
	text-align: center;
	-webkit-background-clip:text;
	-webkit-text-fill-color: transparent;
	letter-spacing: .5rem;
}

The result is what you see at the top of this article. This is one of the areas where vendor prefixed CSS really works well: the gradient is only produced for Chrome and Safari, and they are the only browsers to place the brushed metal effect inside the text. Every other browser sees the same text, but in a single color.

结果就是您在本文顶部看到的。 这是供应商前缀CSS确实可以很好工作的领域之一：渐变仅针对Chrome和Safari产生，并且它们是唯一将拉丝金属效果置于文本内的浏览器。 其他所有浏览器都可以看到相同的文本，但是颜色相同。

I've shown a way of achieving this effect cross-browser previously, but that technique works by embedding the text inside an SVG document, which reduces compatibility with older browsers (read: IE8 and earlier).

之前，我已经展示了一种跨浏览器实现此效果的方法，但是该技术通过将文本嵌入SVG文档中而起作用，从而降低了与旧版浏览器的兼容性(阅读：IE8和更早版本)。

翻译自: https://thenewcode.com/621/Create-Brushed-Metal-Lettering-With-CSS-Gradients