recherche

Maison >interface Web >tutoriel CSS >Comment définir une bordure noire de deux pixels sur une boîte en CSS

Comment définir une bordure noire de deux pixels sur une boîte en CSS

青灯夜游
青灯夜游original
2021-07-07 16:44:007312parcourir

En CSS, vous pouvez utiliser l'attribut border pour définir une bordure noire de deux pixels sur la boîte. Il vous suffit d'ajouter "border:2px border style value black;" ou "border:2px border style value". #000000;" à l'élément box. Stylisez-le simplement.

Comment définir une bordure noire de deux pixels sur une boîte en CSS

Cette opération tutoriel Environnement : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, vous pouvez utiliser l'attribut border pour définir une bordure noire de deux pixels pour la boîte.

L'attribut border définit la taille de la bordure (border-width), le style de la bordure (border-style) et la couleur de la bordure (border-color) dans une seule instruction.

Exemple :

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			.p1 {
				border: 1px solid black;
			}

			.p2 {
				border: 2px solid black;
			}

			.p3 {
				border: 2px solid #000;
			}

			.p4 {
				border: 2px dotted #000;
			}
		</style>
	</head>

	<body>
		<p class="p1">1像素的黑色实线边框</p>
		<p class="p2">2像素的黑色实线边框</p>
		<p class="p3">2像素的黑色实线边框</p>
		<p class="p4">2像素的黑色点状边框</p>
	</body>

</html>

Rendu :

Comment définir une bordure noire de deux pixels sur une boîte en CSS

Description :

1. Attribut border-style

L'attribut border-style est utilisé pour définir le style de toutes les bordures d'un élément, ou pour définir le style de bordure pour chaque côté individuellement. . La bordure ne peut apparaître que si cette valeur n'est pas nulle.

Valeur Description
aucune Ne définissez aucune bordure.
caché Identique à "aucun". Sauf lorsqu'il est appliqué aux tables, pour lesquelles Hidden est utilisé pour résoudre les conflits de bordure.
pointillé Définir une bordure en pointillés. S'affiche sous la forme d'une ligne continue dans la plupart des navigateurs.
pointillé Définir une ligne pointillée. S'affiche sous la forme d'une ligne continue dans la plupart des navigateurs.
solide Définit une ligne continue.
double Définir une ligne double. La largeur de la double ligne est égale à la valeur de border-width.
groove Définissez la bordure du groove 3D. L'effet dépend de la valeur de border-color.
Frête Définissez la bordure de faîte 3D. L'effet dépend de la valeur de border-color.
encart Définissez la bordure d'encart 3D. L'effet dépend de la valeur de border-color.
départ Définissez la bordure de départ 3D. L'effet dépend de la valeur de border-color.
inherit Spécifie que le style de bordure doit être hérité de l'élément parent.

2. Couleur CSS

En CSS, les valeurs de couleur peuvent utiliser des noms de couleur, des pourcentages, des nombres et des valeurs hexadécimales. il existe quatre méthodes d'écriture.

1) Utiliser des noms de couleurs

Bien qu'il existe actuellement environ 184 couleurs nommées, elles sont en fait prises en charge par divers navigateurs, et il n'y a que 16 noms de couleurs recommandés comme spécifications CSS. indiqué dans le tableau ci-dessous.

Tableau 1 : Noms de couleurs recommandés par les spécifications CSS

/*
名 称	颜 色	名 称	颜 色	名 称	颜 色
black	纯黑	silver	浅灰	navy	深蓝
blue	浅蓝	green	深绿	lime	浅绿
teal	靛青	aqua	天蓝	maroon	深红
red	大红	purple	深紫	fuchsia	品红
olive	褐黄	yellow	明黄	gray	深灰
white	壳白
*/

Il n'est pas recommandé d'utiliser des noms de couleurs dans les pages Web, notamment pour une utilisation à grande échelle, afin d'éviter que certains noms de couleurs ne soient non analysé par le navigateur. Ou différents navigateurs interprètent les couleurs différemment.

Il n'est pas recommandé d'utiliser des noms de couleurs dans les pages Web, en particulier pour une utilisation à grande échelle, afin d'éviter que certains noms de couleurs ne soient pas analysés par les navigateurs ou que différents navigateurs n'interprètent les couleurs différemment.

2) Utiliser des pourcentages

Il n'est pas recommandé d'utiliser des noms de couleurs dans les pages Web, en particulier pour une utilisation à grande échelle, afin d'éviter que certains noms de couleurs ne soient pas analysés par les navigateurs, ou que différents navigateurs ont des interprétations différentes des couleurs.

Il s'agit de la méthode la plus couramment utilisée, par exemple : 

color: rgb(100%, 100%, 100%);

Cette instruction définit les trois couleurs primaires du rouge, du bleu et du vert à leurs valeurs maximales, et la combinaison résultante est affiché en blanc. Au lieu de cela, définissez rgb(0%, 0%, 0%) sur noir. Si les trois valeurs de pourcentage sont égales, le gris sera affiché. De même, la valeur de pourcentage la plus élevée favorisera quelle couleur primaire.

3) Utilisez des valeurs numériques

Les nombres vont de 0 à 255, par exemple :

color: rgb(255, 255, 255);

L'instruction ci-dessus affichera du blanc, au contraire, elle peut être réglé sur rgb(0, 0, 0), affichera du noir. Si les trois valeurs sont égales, l'affichage sera gris De la même manière, quelle que soit la valeur la plus grande, elle aura une plus grande proportion de couleur primaire.

4) Couleur hexadécimale

Il s'agit de la méthode de sélection de couleur la plus couramment utilisée, par exemple : 

color: #ffffff;

Dans laquelle vous devez ajouter un devant hexadécimal #Symboles de couleur. L'instruction ci-dessus affichera du blanc. Au contraire, vous pouvez définir #000000 sur noir, décrit par RVB :

color: #RRGGBB;

De 0 à 255, en fait, 255 en décimal vaut. exactement égal à seize Dans FF hexadécimal, une valeur de couleur hexadécimale est égale à 3 groupes de ces valeurs hexadécimales Lorsqu'elles sont connectées ensemble dans l'ordre, elles sont égales aux trois couleurs primaires que sont le rouge, le bleu et le vert.

(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!

html5 css css3 double 继承 border
Déclaration：
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
Article précédent：Comment positionner la carte des sprites CSSArticle suivant：Comment positionner la carte des sprites CSS

Articles Liés

Voir plus