Heim > Web-Frontend > Front-End-Fragen und Antworten > So legen Sie den Farbverlauf in CSS fest

So legen Sie den Farbverlauf in CSS fest

藏色散人
Freigeben: 2021-04-08 19:57:51
Original
3278 Leute haben es durchsucht

So legen Sie Farbverläufe in CSS fest: 1. Verwenden Sie das Attribut „Lineare Farbverläufe“ in CSS3, um lineare Farbverläufe zu erzielen. 2. Verwenden Sie das Attribut „Radiale Farbverläufe“ in CSS3, um radiale Farbverläufe zu erzielen.

So legen Sie den Farbverlauf in CSS fest

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

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

CSS3 definiert zwei Arten von Farbverläufen:

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

  • Radiale Farbverläufe (Farbverläufe) – definiert durch ihre Mittelpunkte

Um eine lineare zu erstellen Für einen Farbverlauf 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.

Beispiel für die CSS-Einstellung eines linearen Farbverlaufs:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
#grad1 {
    height: 200px;
    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); /* 标准的语法(必须放在最后) */
}
</style>
</head>
<body>
<h3>线性渐变 - 从上到下</h3>
<p>从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>
<div id="grad1"></div>
<p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
</html>
Nach dem Login kopieren

Rendering:

So legen Sie den Farbverlauf in CSS fest

Verwandte Empfehlungen: „css3 Farblinearverlaufsattribut: sanfter Übergang zwischen mehreren Farben (mit vollständigem Code)

Das obige ist der detaillierte Inhalt vonSo legen Sie den Farbverlauf in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage