linear-gradient Css规则

linear-gradient是CSS3新增的一个渐变色属性，可以用来实现从一种颜色渐变到另一种颜色的效果。它的语法如下：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

其中，direction是渐变的方向，可以是角度或关键字（如top、bottom等），color-stop是渐变的起止颜色。可以添加多个color-stop来控制渐变的过程。

例如，下面的代码实现了一个从上到下的红色到黄色的渐变：

background: linear-gradient(to bottom, red, yellow);

如果要实现斜向的渐变，可以使用角度值，例如：

background: linear-gradient(45deg, red, yellow);

相关问题

css linear-gradient使用规则

CSS linear-gradient() 函数用于创建线性渐变效果，可以应用于背景图像、文本颜色和边框等属性。其语法如下：

linear-gradient([<angle>|to <side-or-corner>], <color-stop-list>)

其中，`<angle>` 表示渐变方向角度，可选值为 0deg 到 360deg 之间的角度值；`to <side-or-corner>` 表示渐变方向，可选值为 top、bottom、left、right、top left、top right、bottom left 和 bottom right；`<color-stop-list>` 表示渐变过程中的颜色值和位置，格式为 `<color> <position>`，其中 `<color>` 表示颜色值， `<position>` 表示颜色的位置，可选值为百分比（%）或像素（px）。

以下是一些常用的线性渐变示例：

1. 从上到下的渐变：

background: linear-gradient(to bottom, #FFF, #000);

2. 从左上角到右下角的渐变：

background: linear-gradient(to bottom right, #FFF, #000);

3. 指定角度的渐变：

background: linear-gradient(45deg, #FFF, #000);

4. 渐变过程中设置多个颜色和位置：

background: linear-gradient(to bottom, #FFF, #000 50%, #FFF);

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。