Vertiefendes Verständnis von CSS3-Verläufen (Verläufe)

Mit CSS3-Verläufen können Sie sanfte Übergänge zwischen zwei oder mehr angegebenen Farben anzeigen.

Früher mussten Sie Bilder verwenden, um diese Effekte zu erzielen. Durch die Verwendung von CSS3-Verläufen können Sie jedoch heruntergeladene Ereignisse und die Bandbreitennutzung reduzieren. Darüber hinaus sehen Elemente mit Farbverläufen beim Vergrößern besser aus, da der Farbverlauf vom Browser generiert wird.

CSS3 definiert zwei Arten von Farbverläufen:

Lineare Farbverläufe – nach unten/oben/links/rechts/diagonal

Radiale Farbverläufe – definiert durch ihre Mitte

Browser-Unterstützung

Die Zahl in der Tabelle gibt den ersten Browser an, der diese Eigenschaft Serverversion vollständig unterstützt.

Eine Zahl gefolgt von -webkit-, -moz- oder -o- gibt die erste Version an, die zur Unterstützung des Attributs vorangestellt werden muss.

CSS3 Linear Gradient

Um einen linearen Verlauf zu erstellen, müssen Sie mindestens zwei Farbknoten definieren. Farbknoten sind die Farben, die einen sanften Übergang darstellen sollen. Gleichzeitig können Sie auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen.

Beispiele für lineare Farbverläufe:

Syntax

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

Linearer Farbverlauf – von oben nach unten (standardmäßig)

Das folgende Beispiel hat einen linearen Farbverlauf, der von oben beginnt. Beginnend bei Rot, langsamer Übergang zu Blau:

Linearer Farbverlauf von oben nach unten:

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */}

Linearer Farbverlauf – von links nach rechts

Beispiel unten zeigt einen linearen Farbverlauf von links beginnend. Ausgangspunkt ist Rot, langsamer Übergang zu Blau:

Beispiel

Linearer Farbverlauf von links nach rechts:

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */}

Linearer Farbverlauf - diagonal

Sie Sie können einen diagonalen Farbverlauf erstellen, indem Sie die horizontale und vertikale Startposition angeben.

Das folgende Beispiel zeigt einen linearen Farbverlauf beginnend von der oberen linken Ecke (zur unteren rechten Ecke). Der Startpunkt ist Rot und geht langsam in Blau über:

Beispiel

Linearer Verlauf von links oben nach rechts unten:

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */}

Winkel verwenden

Wenn Wenn Sie mehr Kontrolle über die Richtung des Farbverlaufs wünschen, können Sie anstelle einer vordefinierten Richtung einen Winkel definieren (nach unten, nach oben, nach rechts, nach links, nach unten rechts usw.).

Syntax

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

Winkel bezieht sich auf den Winkel zwischen der horizontalen Linie und der Verlaufslinie, berechnet gegen den Uhrzeigersinn. Mit anderen Worten: 0 Grad erzeugt einen Farbverlauf von unten nach oben und 90 Grad erzeugt einen Farbverlauf von links nach rechts.

Bitte beachten Sie jedoch, dass viele Browser (Chrome, Safari, Fiefox usw.) den alten Standard verwenden, d. h. 0 Grad erzeugt einen Farbverlauf von links nach rechts. 90 Grad Es wird ein Farbverlauf von unten nach oben erstellt. Umrechnungsformel 90 – x = y, wobei x der Standardwinkel und y der Nichtstandardwinkel ist.

Das folgende Beispiel zeigt, wie Winkel auf einem linearen Farbverlauf verwendet werden:

Beispiel

Ein linearer Farbverlauf mit einem angegebenen Winkel:

#grad {
  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */}

Verwenden mehrere Farbknoten

Das folgende Beispiel zeigt, wie mehrere Farbknoten eingerichtet werden:

Beispiel

Mit mehreren Farbknoten von oben nach unten Linearer Verlauf:

#grad {
  background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, green, blue); /* 标准的语法 */}

Das folgende Beispiel zeigt, wie man einen linearen Farbverlauf mit Regenbogenfarben und Text erstellt:

Beispiel

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);  /* Opera 11.1 - 12.0 */
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);  /* Firefox 3.6 - 15 */
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);  /* 标准的语法 */
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

使用透明度（transparent）

CSS3 渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

实例

从左到右的线性渐变，带有透明度：

#grad {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */}

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变：

实例

一个重复的线性渐变：

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);  /* Opera 11.1 - 12.0 */
  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);  /* Firefox 3.6 - 15 */
  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);  /* 标准的语法 */
  background: repeating-linear-gradient(red, yellow 10%, green 20%);}

CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

语法

background: radial-gradient(center, shape size, start-color, ..., last-color);

径向渐变 - 颜色结点均匀分布（默认情况下）

实例

颜色结点均匀分布的径向渐变：

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 标准的语法 */}

径向渐变 - 颜色结点不均匀分布

实例

颜色结点不均匀分布的径向渐变：

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */}

设置形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

实例

形状为圆形的径向渐变：

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
  background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */}

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

c

losest-side
farthest-side
closest-corner
farthest-corner

实例

带有不同尺寸大小关键字的径向渐变：

#grad1 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* Opera 11.6 - 12.0 */
  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);  /* 标准的语法 */
  background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);}
 #grad2 {
  /* Safari 5.1 - 6.0 */
  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);  /* Opera 11.6 - 12.0 */
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);  /* Firefox 3.6 - 15 */
  background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);  /* 标准的语法 */
  background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);}

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

实例

一个重复的径向渐变：

#grad {
  /* Safari 5.1 - 6.0 */
  background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);  /* Opera 11.6 - 12.0 */
  background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);  /* Firefox 3.6 - 15 */
  background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);  /* 标准的语法 */
  background: repeating-radial-gradient(red, yellow 10%, green 15%);}

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费css在线视频教程

3. php.cn独孤九贱（2）－css视频教程

4. 兼容多浏览器的gradient写法详解

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis von CSS3-Verläufen (Verläufe). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!