Heim  >  Artikel  >  Web-Frontend  >  Wie man mit CSS eine gerade Linie mit scharfen Enden erstellt

Wie man mit CSS eine gerade Linie mit scharfen Enden erstellt

青灯夜游
青灯夜游Original
2021-09-10 17:32:522770Durchsuche

Sie können dem zu zeichnenden Element in CSS den Stil „background:linear-gradient(rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%;“ hinzufügen gerade Linien mit scharfen Kanten an beiden Enden.

Wie man mit CSS eine gerade Linie mit scharfen Enden erstellt

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

In CSS können Sie die Funktion linear-gradient() verwenden, um eine gerade Linie zu erstellen, die an beiden Enden spitz wird.

Beispiel:

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			background-color: red;
		}

		.Line {
			width: 1px;
			height: 500px;
			background: linear-gradient(244deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
			margin: 20px;
		}
	</style>
</head>
<body>
	<div class="Line"></div>
</body>
</html>

Wie man mit CSS eine gerade Linie mit scharfen Enden erstellt

Beschreibung: Die Funktion

linear-gradient() wird verwendet, um ein Bild zu erstellen, das einen linearen Farbverlauf aus zwei oder mehr Farben darstellt.

Um einen linearen Farbverlauf zu erstellen, müssen Sie zwei Farben angeben. Sie können auch Farbverlaufseffekte in verschiedenen Richtungen erzielen (angegeben als Winkel). Wenn die Richtung nicht angegeben ist, erfolgt der Farbverlauf standardmäßig von oben nach unten.

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

Wert Beschreibung
Richtung Geben Sie die Richtung (oder den Winkel) des Farbverlaufs mit einem Winkelwert an.
color-stop1, color-stop2,... werden verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.

Beispiel:

//线性渐变指定一个角度:
#grad { background-image: linear-gradient(180deg, red, yellow);}

//线性渐变指定多个终止色:
#grad {background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}

//透明度:
#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}

Empfohlenes Tutorial: „CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWie man mit CSS eine gerade Linie mit scharfen Enden erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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