css - 如何垂直分割 2 种颜色的文本？

Question

我希望我的 div 中的一个单词使用纯 CSS 垂直分成 2 种颜色，知道我该怎么做吗？

Answer 1

你当然可以使用 CSS3 渐变和剪辑属性.. 我知道我使用的 webkits，但不确定其他浏览器，如果你愿意，你可以试试这个

演示（请在 chrome 上查看）

div {
  font: 40px Arial;
  background: -webkit-linear-gradient(top, #0d2172 0%,#0d2172 50%,#ff2828 50%,#ff0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

注意：作为网络开发人员没有使用任何最新的浏览器，如果您知道任何相同的专有属性，请随时编辑我的答案