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>
径向渐变通过 radial-gradient
设置,从一个中心点出发,向周围辐射过渡,例如:
<!-- 圆,位于中心 -->
<div style="background: radial-gradient(circle, #66CCFF, #212121); height:320px;"></div>
<!-- 圆,位于左上角 -->
<div style="background: radial-gradient(circle at top left, #66CCFF, #212121); height:320px;"></div>
<!-- 椭圆,位于中心 -->
<div style="background: radial-gradient(ellipse, #66CCFF, #212121); height:320px;"></div>
<!-- 椭圆,位于右下角 -->
<div style="background: radial-gradient(ellipse at right bottom, #66CCFF, #212121); height:320px;"></div>
渐变不能直接用于文本,但可以通过将文本设为透明,背景裁切为文本范围,设置背景渐变来间接实现文件渐变。
<span style="background: linear-gradient(90deg, #ff1493, #66CCFF); background-clip:text; color:transparent;">
Primers —— 你的编程学习伙伴
</span>