Maison > interface Web > tutoriel CSS > le corps du texte

Comment définir la couleur de la bordure div avec CSS

藏色散人
Libérer: 2023-01-03 09:26:40
original
7361 Les gens l'ont consulté

Comment définir la couleur de la bordure d'un div avec CSS : créez d'abord un exemple de fichier HTML ; puis définissez un div et enfin définissez la bordure en ajoutant des attributs tels que "border-color" ou "border-left ; -color" au div Just color.

Comment définir la couleur de la bordure div avec CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

css ajoute une couleur de bordure à div

1 css ajoute des bordures aux quatre côtés de div respectivement

border-color:#000(设置4边边框颜色为黑色)
border-color:+颜色值,即可设置对象边框颜色
border-left-color:#000 设置左边框颜色为黑色
border-right-color:#000 设置右边框颜色为黑色
border-top-color:#000 设置上边框颜色为黑色
border-bottom-color:#000 设置下边框颜色为黑色
Copier après la connexion

Condition : La bordure de l'objet doit être. définie pour exister, la largeur de la bordure doit être supérieure ou égale à 1px avant que la couleur de la bordure soit affichée et ait une signification.

Par exemple :

.div{ 
    border-style: solid; 
    border-width: 1px; 
    border-color: #000;
}
Copier après la connexion

De cette façon, la bordure de l'objet est définie sur une bordure pleine, la largeur (épaisseur) de la bordure est de 1 px et la couleur de la bordure est noire, de sorte que la bordure la couleur prendra effet.

2. L'abréviation pour définir le style de couleur de la bordure est simplifiée

.div{ 
    border-style:solid; 
    border-width:1px; 
    border-color:#000;
}
Copier après la connexion

De cette façon, le style de bordure de l'objet ".div" est défini, nous pouvons l'abréger en

.div{ 
    border:solid 1px #000;
}
Copier après la connexion

Effet :

Comment définir la couleur de la bordure div avec CSS

Trois valeurs de bordure séparées par des espaces

Abrévier le code de style de couleur de bordure peut économiser votre code et réduire la quantité de code CSS.

[Apprentissage 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