是否可以通过CSS设置文本的水平渐变？ （左字母一种颜色，右字母另一种颜色）[重复]

Question

是否可以通过 CSS 设置文本的水平渐变？ （左字母一种颜色，右字母另一种颜色）。

Answer 1

是的，是的。

h1 {
  font-size: 72px;
   background: -webkit-linear-gradient(left, red , yellow);
   background: -o-linear-gradient(right, red, yellow);
   background: -moz-linear-gradient(right, red, yellow);
   background: linear-gradient(to right, red , yellow); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>Hello World</h1>

使用 React 和样式组件的示例：

const ColorText = styled.h1 `
  font-size: 72px;
  background: linear-gradient(to right, red , yellow); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
`;

const App = () => (
  <ColorText>Colorful Text</ColorText>
);

ReactDOM.createRoot(
  document.getElementById("root")
).render(<App/>);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<script crossorigin src="//unpkg.com/styled-components/dist/styled-components.min.js"></script>