Maison > interface Web > tutoriel CSS > Comment définir la taille et la couleur des bordures en CSS

Comment définir la taille et la couleur des bordures en CSS

青灯夜游
Libérer: 2021-11-09 16:47:59
original
10936 Les gens l'ont consulté

Comment définir la taille et la couleur de la bordure en CSS : 1. Utilisez l'attribut border-width pour définir la taille de la bordure de l'élément, la syntaxe "border-width: width value;" 2. Utilisez l'attribut border-color pour définir la couleur de la bordure, la syntaxe "border -color: color value;".

Comment définir la taille et la couleur des bordures en CSS

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

Tous les éléments HTML peuvent être considérés comme des boîtes. En CSS, le terme « modèle de boîte » est utilisé dans la conception et la mise en page.

Le modèle de boîte CSS est essentiellement une boîte qui encapsule les éléments HTML environnants, notamment : les marges, les bordures, le remplissage et le contenu réel.

Le modèle boîte nous permet de placer des éléments dans l'espace entre d'autres éléments et la bordure de l'élément environnant.

Comment définir la taille et la couleur des bordures en CSS

Définissez la taille et la couleur de la bordure en CSS

Définissez la taille de la bordure en CSS

En CSS, utilisez l'attribut border-width pour définir la taille de la bordure de l'élément.

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				height: 50px;
				margin: 20px;
			}

			.box1 {
				border: 1px solid red;
			}

			.box2 {
				border: 5px solid red;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>
Copier après la connexion

Comment définir la taille et la couleur des bordures en CSS

Définissez le style de bordure avec CSS

En CSS, vous pouvez utiliser l'attribut border-color pour définir la couleur de la bordure.

<!DOCTYPE html>
<html>
	<head>
		<style>
			div {
				height: 50px;
				margin: 20px;
				border: 2px solid red;
			}

			.box1 {
				border-color: paleturquoise;
			}

			.box2 {
				border-color: goldenrod;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>
Copier après la connexion

Comment définir la taille et la couleur des bordures en CSS

(Partage de vidéos d'apprentissage : 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