#CSS 的渐变

CSS 渐变色是使用函数来生成平滑的颜色过渡效果，可以用于背景、边框等。

#线性渐变

线性渐变通过 linear-gradient 设置，沿着一条轴线逐渐过渡，例如：

<!-- 沿 90 度方向 -->
<p style="background: linear-gradient(90deg, #39c5bb, #66CCFF, #39c5bb)">Primers —— 你的编程学习伙伴</p>

<!-- 沿 90 度方向，并设置颜色所在的位置，起止范围为不渐变 -->
<p style="background: linear-gradient(90deg, #39c5bb 30%, #66CCFF 50%, #39c5bb 70%)">Primers —— 你的编程学习伙伴</p>

HTML

#径向渐变

径向渐变通过 radial-gradient 设置，从一个中心点出发，向周围辐射过渡，例如：

<!-- 圆，位于中心 -->
<div style="background: radial-gradient(circle, #66CCFF, #212121); height:320px;"></div>

HTML

<!-- 圆，位于左上角 -->
<div style="background: radial-gradient(circle at top left, #66CCFF, #212121); height:320px;"></div>

HTML

<!-- 椭圆，位于中心 -->
<div style="background: radial-gradient(ellipse, #66CCFF, #212121); height:320px;"></div>

HTML

<!-- 椭圆，位于右下角 -->
<div style="background: radial-gradient(ellipse at right bottom, #66CCFF, #212121); height:320px;"></div>

HTML

#文本渐变

渐变不能直接用于文本，但可以通过将文本设为透明，背景裁切为文本范围，设置背景渐变来间接实现文件渐变。

<span style="background: linear-gradient(90deg, #ff1493, #66CCFF); background-clip:text; color:transparent;">
    Primers —— 你的编程学习伙伴
</span>

文本渐变