CSS linear-gradient() function

Paglilinaw at Paggamit

CSS linear-gradient() Ang function ay ginagamit para gumawa ng linear-gradient bilang background.

Upang gumawa ng guhit na paglaya ng kulay, dapat na malaman ang dalawang kulay na ibig sabihin mong magiging kulay ng paglipat. Maaari mo ring itakda ang simula at direksyon (o angle) at ang epekto ng paglaya ng kulay.

Halimbawa ng guhit na paglaya ng kulay:

Mga halimbawa

Halimbawa 1

Ang guhit na paglaya ng kulay na nagsisimula sa itaas. Ito ay mula sa pula at lumilipat sa dilaw, at mula sa dilaw at lumilipat sa asul:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

亲自试一试

Halimbawa 2

Ang isang guhit na paglaya ng kulay na nagsisimula sa kaliwa. Ito ay mula sa pula at lumilipat sa asul:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

亲自试一试

Halimbawa 3

Ang isang guhit na paglaya ng kulay na nagsisimula sa itaas ng kaliwa (at sumusulong sa kanang ibaba):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

亲自试一试

Halimbawa 4

Ang isang guhit na paglaya ng kulay na may tinukoy na ang angle:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

亲自试一试

Halimbawa 5

Ang isang guhit na paglaya ng kulay na naglalaman ng maraming tanda ng kulay:

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

亲自试一试

例子 6

一个具有两个位置色标的线性渐变：

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

亲自试一试

例子 7

一个具有透明度的线性渐变：

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

亲自试一试

CSS 语法

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);
值 描述
side-or-corner

可选。渐变的起点。以关键字“to”开始，后接最多两个其他关键字：

  • left 或 right
  • top 或 bottom

默认值为 to bottom（到底部）。
angle

可选。渐变线的方向角度：

  • 0deg 等于：to top（到顶部）
  • 180deg 等于：to bottom（到底部）
  • 270deg 等于：to left（到左侧）
  • 90deg 等于：to right（到右侧）
color-stop1, color-stop2,...

必需。色标是您希望在其间实现平滑过渡的颜色。

这个值由一个颜色值组成，后接一个可选的一个或两个位置的色标（在 0% 到 100% 之间的百分比或沿渐变轴的长度）。

技术细节

版本： CSS3

浏览器支持

表格中的数字表示首个完全支持该函数的浏览器版本。

Chrome Edge Firefox Safari Opera
linear-gradient()
26 10 16 6.1 12.1
两个位置的色标
71 79 64 12.1 58

相关页面

教程：CSS 渐变

参考：Attribute ng background-image ng CSS

参考：CSS conic-gradient() 函数

参考：CSS radial-gradient() 函数

参考：CSS repeating-conic-gradient() 函数

参考：CSS repeating-linear-gradient() 函数

参考：CSS repeating-radial-gradient() 函数