css颜色渐变语法,CSS3渐变背景之linear-gradient()函数 - YangJunwei

线性渐变的语法为：linear-gradient(direction, color-stop1, color-stop2, …);
其中，direction 表示渐变方向，可以是角度值或关键字（如 to left、to right、to bottom、to top 等等），color-stop 表示渐变的颜色和位置，可以是颜色值、长度值或百分比。

例如，以下代码实现从左到右的红色到蓝色渐变背景：

background: linear-gradient(to right, red, blue);

如果需要多个颜色的渐变，可以在 color-stop 中添加多个颜色和位置，例如：

background: linear-gradient(to right, red, yellow 30%, green 60%, blue);

这将实现从左到右的红色到黄色，然后到绿色，最后到蓝色的渐变背景。

相关问题

css3渐变之linear-gradient与-webkit-linear-gradient写法异同

CSS3渐变中的linear-gradient和-webkit-linear-gradient都是用来实现线性渐变效果的，其中前者是W3C标准的写法，后者则是Webkit内核浏览器（如Chrome、Safari）的私有写法。

它们的写法异同如下：

1. 语法不同

- linear-gradient语法：linear-gradient([<angle> | to <side-or-corner>], <color-stop>[, <color-stop>]+)
- -webkit-linear-gradient语法：-webkit-linear-gradient([<angle> | <side-or-corner>,]? <color-stop>, <color-stop>)

2. 角度值表示不同

- linear-gradient中的角度值可以是以度数为单位的数值或关键字（如top、right、bottom、left），0度表示从上往下，90度表示从左往右。
- -webkit-linear-gradient中的角度值只支持数值，而且要求必须加上度数单位（如deg），0度表示从左往右，90度表示从下往上。

3. 兼容性不同

- linear-gradient是W3C标准写法，所有现代浏览器都支持。
- -webkit-linear-gradient是Webkit内核浏览器的私有写法，只有在这些浏览器中才能使用。

总之，为了兼容所有浏览器，建议使用标准的linear-gradient写法。如果需要兼容Webkit内核浏览器，可以在linear-gradient前加上-webkit-前缀，写成-webkit-linear-gradient。

linear-gradient() 渐变背景色怎么加css3 过渡效果

要给 `linear-gradient()` 渐变背景色添加 CSS3 过渡效果，可以使用 CSS3 的 `transition` 属性。具体的做法是：

1. 首先定义要使用渐变背景色的元素，并设置其初始的渐变背景色。

.background {
  background: linear-gradient(to right, red, yellow);
}

2. 接着，设置 `transition` 属性，指定要过渡的 CSS 属性和过渡时间。

.background {
  background: linear-gradient(to right, red, yellow);
  transition: background 0.5s ease;
}

这里我们指定了要过渡的属性是 `background` ，时间为 `0.5s`，过渡方式为 `ease`。

3. 最后，在鼠标悬浮在元素上时，修改渐变背景色即可触发过渡效果。

.background:hover {
  background: linear-gradient(to right, blue, green);
}

完整的代码如下：

.background {
  background: linear-gradient(to right, red, yellow);
  transition: background 0.5s ease;
}

.background:hover {
  background: linear-gradient(to right, blue, green);
}