Comment faire une ligne droite avec des extrémités pointues en utilisant CSS

青灯夜游
Libérer: 2023-01-11 09:19:25
original
2778 Les gens l'ont consulté

Vous pouvez ajouter le style "background:linear-gradient(rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);" lignes droites avec des arêtes vives aux deux extrémités.

Comment faire une ligne droite avec des extrémités pointues en utilisant CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser la fonction Linear-gradient() pour créer une ligne droite qui devient pointue aux deux extrémités.

Exemple :

<!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>
Copier après la connexion

Comment faire une ligne droite avec des extrémités pointues en utilisant CSS

Description : La fonction

linear-gradient() est utilisée pour créer une image qui représente un dégradé linéaire de deux couleurs ou plus.

Pour créer un dégradé linéaire, vous devez spécifier deux couleurs. Vous pouvez également obtenir des effets de dégradé dans différentes directions (spécifiées sous forme d'angle). Si la direction n'est pas spécifiée, le dégradé sera par défaut de haut en bas.

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

valeur description
directionSpécifiez la direction (ou l'angle) du dégradé avec une valeur d'angle.
color-stop1, color-stop2,... sont utilisés pour spécifier les couleurs de début et de fin du dégradé.

Exemple :

//线性渐变指定一个角度:
#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));}
Copier après la connexion

Tutoriel recommandé : "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!