如何在 HTML(CSS) 中绘制半个字母或文本？ [复制]答案

【问题标题】：How to paint half of a letter or text in HTML(CSS)? [duplicate]如何在 HTML(CSS) 中绘制半个字母或文本？ [复制]
【发布时间】：2018-04-21 11:14:24
【问题描述】：

如果我有：<p>A</p>

在 html、css 或 Javascript 中有什么方法可以让我将“A”的一半涂成白色，另一半涂成黑色或任何其他颜色。

谢谢

【问题讨论】：

w3schools.com/css/css3_gradients.asp
需要一些样品设计
@Robbie 那是用于background 而不是color 这是用于字体颜色的。
@RobbieMilejczak 背景渐变与 OPs 问题有什么关系？另外，请不要使用 W3Schools 作为参考。他们的文章经常过时，有时甚至完全是错误的。 MDN 更加全面和准确：developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
@j08691 是的，我完全不知道它是如何获得支持的

【解决方案1】：

您可以按照 Robbie 的建议尝试使用渐变。这只有一个缺点。您将无法使用 text-shadow 属性 （除了另一个 hack - 复制文本并为其赋予 shadow 属性）

根据要求编辑...

p {
  font-size: 12px;
  background: -webkit-linear-gradient(#000, #DDD);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

【讨论】：