让 CSS 布局不再头疼！10 个超实用的 CSS 一行代码技巧

你是否也经常被复杂的 CSS 布局搞得焦头烂额？别担心！今天就来分享一些简单却超实用的 CSS 一行代码技巧，让你轻松搞定布局，提升效率，还能让代码更优雅。

1. 带背景渐变的文字

想要让标题更吸引眼球吗？试试给文字添加背景渐变！

实现这个效果需要一个小技巧，因为通常情况下渐变属性不能直接应用于文字。我们可以把渐变作为背景，然后剪切它，只显示文字所在的区域。

<h1 class="gradient-text">酷炫的渐变文字</h1>

.gradient-text {
  background: linear-gradient(45deg, red, blue);
  background-clip: text;
  color: transparent;
}

• background: linear-gradient(45deg, red, blue);  - 创建一个从红色到蓝色的线性渐变，45deg 表示渐变方向，red 和 blue 是渐变的起始颜色和结束颜色。你也可以使用其他颜色，并用逗号隔开。此外，还可以使用 radial-gradient()  创建径向渐变，或者使用 conic