Kann der radiale CSS-Gradient den Winkel ändern?

Der radiale CSS-Gradient kann den Winkel nicht ändern. Der radiale CSS-Gradient wird mithilfe der Funktion radial-gradient() mit der Syntax „background:radial-gradient(type size at position, start color, ..., end color);“ implementiert Der radiale Farbverlauf (Kreis oder Ellipse), die Farbverlaufsgröße (nächstes Ende, nächste Ecke, am weitesten entferntes Ende, am weitesten entfernte Ecke, eingeschlossen oder abgedeckt), die Farbverlaufsposition und die Start- und Endfarben des Farbverlaufs, aber daher kann der Winkel des radialen Farbverlaufs nicht angegeben werden Satz.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS3 Radialer Farbverlauf

radial-gradient()-Funktion erstellt ein „Bild“ mit einem radialen Farbverlauf. Radiale Gradienten werden durch einen Mittelpunkt definiert.

Mit dem radialen Farbverlauf können Sie die Form des Farbverlaufs (Kreis oder Ellipse), die Größe (nächste Seite, nächste Ecke, am weitesten entfernte Seite) angeben, einschließlich oder abdeckend (nächste Seite, nächste Ecke, am weitesten entfernte Seite). am weitesten entfernte Ecke, enthalten oder abdecken)), Position sowie Start- und Endfarben des Farbverlaufs. Farbstopps: Genau wie bei einem linearen Farbverlauf sollten Sie die Anfangs- und Endfarben des Farbverlaufs entlang der Farbverlaufslinie definieren.

Beispiel: Das folgende Beispiel zeigt einen radialen Farbverlauf – gleichmäßige Verteilung von Farbknoten:

#grad {
  background-image: radial-gradient(red, green, blue);
}

<radial gradient> = radial-gradient( [ [ <shape> || <size> ] [ at <position> ]?，| at <position> ，] ? <color-stop> ]+)</color-stop></position></position></size></shape></radial>Wert

BeschreibungBestätigen Sie den Kreis Typ: circle: Geben Sie den radialen Verlauf des Kreises an. Definieren Sie die Größe des Verlaufs. Mögliche Werte: Nächste Seite: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Mittelpunkt des Kreises bis zur Seite an, die dem Mittelpunkt des Kreises am nächsten liegt, um die Position des Farbverlaufs zu definieren. Mögliche Werte: (Standard): Legen Sie den mittleren Ordinatenwert der Mitte des radialen Verlaufskreises fest. wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.

下面为了更好的理解radial-gradient()具体的用法，我们主要通过不同的示例来对比CSS3径向渐变的具体用法

示例一：

background: -moz-radial-gradient(#ace, #f96, #1E90FF);
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

效果：

示例二：

background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);
background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

效果如下：

从以上俩个示例的代码中发现，他们起止色想同，但就是示例二定位了些数据，为什么会造成这么大的区别呢？其实在径向渐变中虽然具有相同的起止色，但是在没有设置位置时，其默认颜色为均匀间隔，这一点和我们前面的线性渐变是一样的，但是设置了渐变位置就会按照渐变位置去渐变，这就是我们示例一和示例的区别之处：虽然圆具有相同的起止颜色，但在示例一为默认的颜色间隔均匀的渐变，而示例二每种颜色都有特定的位置。

示例三：

background: -moz-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);

效果如下：

示例四：

background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);

效果如下：

示例三和示例四我们从效果中就可以看出，其形状不一样，示例三程圆形而示例四程椭圆形状，也是就是说他们存在形状上的差异。然而我们在回到两个示例的代码中，显然在示例三中设置其形状为 circle，而在示例四中 ellipse，换而言之在径向渐变中，我们是可以设置其形状的。

示例五：

background: -moz-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

效果如下：

示例六：

background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);

效果如下：

从示例五和示例六中的代码中我们可以清楚知道，在示例五中我人应用了closest-side而在示例六中我们应用了farthest-corner。这样我们可以知道在径向渐变中我们还可以为其设置大小(Size)：size的不同选项(closest-side, closest-corner, farthest-side, farthest-corner, contain or cover)指向被用来定义圆或椭圆大小的点。 示例：椭圆的近边VS远角 下面的两个椭圆有不同的大小。示例五是由从起始点(center)到近边的距离设定的，而示例六是由从起始点到远角的的距离决定的。

示例七：

background: -moz-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

效果如下：

示例八：

background: -moz-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);
background: -webkit-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

效果如下：

示例七和示例八主要演示了圆的近边VS远边 ，示例七的圆的渐变大小由起始点(center)到近边的距离决定，而示例八的圆则有起始点到远边的距离决定。

示例九：

background: -moz-radial-gradient(#ace, #f96, #1E90FF);
background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

效果如下：

示例十：

background: -moz-radial-gradient(contain, #ace, #f96, #1E90FF);
background: -webkit-radial-gradient(contain, #ace, #f96, #1E90FF);

效果如下：

示例九和示例十演示了包含圆 。在这里你可以看到示例九的默认圈，同一渐变版本，但是被包含的示例十的圆。

最后我们在来看两个实例一个是应用了中心定位和full sized,如下所示：

/* Firefox 3.6+ */ 
 background: -moz-radial-gradient(circle, #ace, #f96); 
 /* Safari 4-5, Chrome 1-9 */ 
 /* Can't specify a percentage size? Laaaaaame. */ 
 background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ace), to(#f96)); 
 /* Safari 5.1+, Chrome 10+ */ 
 background: -webkit-radial-gradient(circle, #ace, #f96);

效果如下：

下面这个实例应用的是Positioned, Sized，请看代码和效果：

/* Firefox 3.6+ */ 
/* -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* ) */
background: -moz-radial-gradient(80% 20%, closest-corner, #ace, #f96); 
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#ace), to(#f96)); 
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(80% 20%, closest-corner, #ace, #f96);

效果如下：

扩展知识：

我们看看CSS3 重复渐变（Repeating Gradient）的应用。

如果您想重复一个渐变，您可以使用-moz-repeating-linear-gradient（重复线性渐变）和-moz-repeating-radial-gradient（重复径向渐变）。 在下面的例子，每个实例都指定了两个起止颜色，并无限重复。

background: -moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);
background: -moz-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);
background: -webkit-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);

效果：

 

有关于CSS3渐变的东西就完了，大家看完了肯定会想，他主要用在哪些方面呢？这个说起来就多了，最简单的就是制作背景，我们还可以应用其制作一些漂亮的按钮，还可以用他来制作patterns，我在这里列出几种制作patterns的示例代码吧：

HTML代码：

<ul>
   <li class="gradient gradient1"></li>
   <li class="gradient gradient2"></li>
   <li class="gradient gradient3"></li>
   <li class="gradient gradient4"></li>
   <li class="gradient gradient5"></li>
   <li class="gradient gradient6"></li>
</ul>

CSS 代码：

ul {
  overflow: hidden;
  margin-top: 20px;
}
li{
  width: 150px;
  height: 80px;
  margin-bottom: 10px;
  float: left;
  margin-right: 5px;
  background: #ace;
  /*Controls the size*/
  -webkit-background-size: 20px 20px;
  -moz-background-size: 20px 20px;
  background-size: 20px 20px;
}
     
li.gradient1 {
  background-image: -webkit-gradient(
    linear,
    0 100%, 100% 0,
    color-stop(.25, rgba(255, 255, 255, .2)),
    color-stop(.25, transparent),
    color-stop(.5, transparent),
    color-stop(.5, rgba(255, 255, 255, .2)),
    color-stop(.75, rgba(255, 255, 255, .2)),
    color-stop(.75, transparent),
    to(transparent)
    );
  background-image: -moz-linear-gradient(
    45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
    );
  background-image: -o-linear-gradient(
    45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, .2) 25%,
    transparent 25%,
    transparent 50%,
    gba(255, 255, 255, .2) 50%,
    rgba(255, 255, 255, .2) 75%,
    transparent 75%,
    transparent
    );
}
 
li.gradient2 {
   background-image: -webkit-gradient(linear, 0 0, 100% 100%,
      color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
      color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
      to(transparent));
   background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
   background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
      transparent 75%, transparent);
}
     
li.gradient3 {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
     
li.gradient4 {
  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
     
li.gradient5 {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
  background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
     -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
     -moz-linear-gradient(45deg, transparent 75%, #555 75%),
     -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
     -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
     -o-linear-gradient(45deg, transparent 75%, #555 75%),
     -o-linear-gradient(-45deg, transparent 75%, #555 75%);
  background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(45deg, transparent 75%, #555 75%),
    linear-gradient(-45deg, transparent 75%, #555 75%);
}
     
li.gradient6 {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
     -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
  background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
     -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
     -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
  background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
     linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
}

效果：

（学习视频分享：css视频教程）

	Form
ellipse (Standard): Gibt einen elliptischen radialen Farbverlauf an.	size
farthest-corner (Standard): Geben Sie die Radiuslänge des radialen Verlaufs an der Mittelpunkt des Kreises bis Der am weitesten vom Mittelpunkt des Kreises entfernteste Winkel	Nächste Ecke : Geben Sie die Radiuslänge des radialen Farbverlaufs vom Kreismittelpunkt bis zum Winkel an, der dem Kreismittelpunkt am nächsten liegt. am weitesten entfernte Seite: Geben Sie die Radiuslänge des radialen Farbverlaufs vom Kreismittelpunkt bis zur am weitesten entfernten Seite an den Mittelpunkt des Kreises Position
center	top: Legen Sie die Oberseite als Ordinatenwert der Mitte des radialen Verlaufskreises fest. unten: Stellen Sie den Boden auf den Ordinatenwert der Mitte des radialen Verlaufskreises ein. start-color, ..., last-color

Das obige ist der detaillierte Inhalt vonKann der radiale CSS-Gradient den Winkel ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!