国际访客建议访问 Primers 编程伙伴 国际服 以获得更好的体验。 快速访问 HTML 样式 渐变

# 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>

# 径向渐变

径向渐变通过 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>
本文 更新于: 2025-06-05 19:13:12 创建于: 2025-06-05 19:13:12