Maison interface Web tutoriel CSS Partagez l'exemple de code pour ajouter un style de bordure à un div

Partagez l'exemple de code pour ajouter un style de bordure à un div

Jul 19, 2017 am 11:18 AM
样式 示例 边框

Comment ajouter un style de bordure à un div ?

Il est très simple d'ajouter un style de bordure à la boîte div, il suffit d'utiliser le style de plaque de bordure.

1. Bordures pointillées et pleines - TOP

Style de bordure en pointillé : pointillé
Style d'implémentation de la bordure : solide

border:1px dashed #000
Copier après la connexion

signifie définir la largeur de la bordure de l'objet sur 1px La bordure en pointillés noirs

border:1px solid #000
Copier après la connexion


signifie définir la largeur de la bordure de l'objet à 1px pour obtenir une bordure noire

2. Ajoutez une bordure en haut de le div - TOP

Nous ajoutons une bordure noire de 1px en haut du div

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

3. Ajoutez une bordure en bas du div - TOP

Ajoutez une bordure rouge en pointillés de 2 pixels au bas de la boîte div

div{border-bottom:2px dashed #F00}
Copier après la connexion

4. Ajoutez une bordure sur le côté gauche de la boîte div - TOP

Donnez un nom CSS de sélecteur CSS ". .divcss5" et ajoutez une bordure bleue pleine de 1 px sur le côté gauche de la boîte

.divcss5{ border-left:1px solid #00F}
Copier après la connexion

Code DIV :

<div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div>
Copier après la connexion

5. Ajoutez une bordure sur le côté droit de la boîte div - TOP

Ajoutez une bordure solide rouge de 1 px sur le côté droit de l'objet div

div{ border-right:1px solid #F00}
Copier après la connexion

6, Ajoutez des bordures en haut et en bas de la boîte - TOP

Ajoutez 1px en haut et en bas de la boîte pour obtenir une bordure noire

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

7. Ajoutez des bordures sur les côtés gauche et droit de la boîte div - TOP

Ajouter des bordures sur les côtés gauche et droit de la boîte Ajoutez une bordure verte en pointillé de 2px

div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0}
Copier après la connexion

8. Ajoutez une bordure aux quatre côtés du div - TOP

Ajoutez 3px aux quatre côtés de un DIV pour réaliser une bordure noire

div{ border:3px solid #000}
Copier après la connexion

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!

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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment ajuster les paramètres de bordure de fenêtre sous Windows 11 : modifier la couleur et la taille Comment ajuster les paramètres de bordure de fenêtre sous Windows 11 : modifier la couleur et la taille Sep 22, 2023 am 11:37 AM

Windows 11 met au premier plan un design frais et élégant ; l'interface moderne vous permet de personnaliser et de modifier les moindres détails, tels que les bordures des fenêtres. Dans ce guide, nous discuterons des instructions étape par étape pour vous aider à créer un environnement qui reflète votre style dans le système d'exploitation Windows. Comment modifier les paramètres de bordure de fenêtre ? Appuyez sur + pour ouvrir l'application Paramètres. WindowsJe vais dans Personnalisation et clique sur Paramètres de couleur. Changement de couleur Paramètres des bordures de fenêtre Fenêtre 11" Largeur = "643" Hauteur = "500" > Recherchez l'option Afficher la couleur d'accent sur la barre de titre et les bordures de fenêtre et activez le commutateur à côté. Pour afficher les couleurs d'accent dans le menu Démarrer et la barre des tâches Pour afficher la couleur du thème dans le menu Démarrer et la barre des tâches, activez Afficher le thème dans le menu Démarrer et la barre des tâches.

macOS : Comment changer la couleur des widgets du bureau macOS : Comment changer la couleur des widgets du bureau Oct 07, 2023 am 08:17 AM

Dans macOS Sonoma, les widgets n'ont pas besoin d'être masqués hors écran ou oubliés dans le panneau du Centre de notifications comme c'était le cas dans les versions précédentes de macOS d'Apple. Au lieu de cela, ils peuvent être placés directement sur le bureau de votre Mac – ils sont également interactifs. Lorsqu'ils ne sont pas utilisés, les widgets du bureau macOS s'effacent en arrière-plan dans un style monochrome, réduisant ainsi les distractions et vous permettant de vous concentrer sur la tâche à accomplir dans l'application ou la fenêtre active. Cependant, lorsque vous cliquez sur le bureau, ils reviennent en couleur. Si vous préférez un aspect terne et souhaitez conserver cet aspect d'uniformité sur votre bureau, il existe un moyen de le rendre permanent. Les étapes suivantes montrent comment procéder. Ouvrez l'application Paramètres système

Introduction aux fonctions Python : Introduction et exemples de fonction exec Introduction aux fonctions Python : Introduction et exemples de fonction exec Nov 03, 2023 pm 02:09 PM

Introduction aux fonctions Python : Introduction et exemples de fonction exec Introduction : En Python, exec est une fonction intégrée utilisée pour exécuter du code Python stocké dans une chaîne ou un fichier. La fonction exec fournit un moyen d'exécuter dynamiquement du code, permettant au programme de générer, modifier et exécuter du code selon les besoins pendant l'exécution. Cet article explique comment utiliser la fonction exec et donne quelques exemples de code pratiques. Comment utiliser la fonction exec : La syntaxe de base de la fonction exec est la suivante : exec

Mar 22, 2024 pm 09:33 PM

Spécifications d'indentation et exemples du langage Go Le langage Go est un langage de programmation développé par Google. Il est connu pour sa syntaxe concise et claire, dans laquelle les spécifications d'indentation jouent un rôle crucial dans la lisibilité et la beauté du code. Cet article présentera les spécifications d'indentation du langage Go et les expliquera en détail à travers des exemples de code spécifiques. Spécifications d'indentation Dans le langage Go, les tabulations sont utilisées pour l'indentation au lieu des espaces. Chaque niveau d'indentation correspond à un onglet, généralement défini sur une largeur de 4 espaces. De telles spécifications unifient le style de codage et permettent aux équipes de travailler ensemble pour compiler

Explication détaillée de la fonction Oracle DECODE et exemples d'utilisation Explication détaillée de la fonction Oracle DECODE et exemples d'utilisation Mar 08, 2024 pm 03:51 PM

La fonction DECODE dans Oracle est une expression conditionnelle souvent utilisée pour renvoyer différents résultats en fonction de différentes conditions dans les instructions de requête. Cet article présentera en détail la syntaxe, l'utilisation et un exemple de code de la fonction DECODE. 1. Syntaxe de la fonction DECODE DECODE(expr,search1,result1[,search2,result2,...,default]) expr : l'expression ou le champ à comparer. recherche1,

Introduction aux fonctions Python : utilisation et exemples de fonction abs Introduction aux fonctions Python : utilisation et exemples de fonction abs Nov 03, 2023 pm 12:05 PM

Introduction aux fonctions Python : utilisation et exemples de la fonction abs 1. Introduction à l'utilisation de la fonction abs En Python, la fonction abs est une fonction intégrée utilisée pour calculer la valeur absolue d'une valeur donnée. Il peut accepter un argument numérique et renvoyer la valeur absolue de ce nombre. La syntaxe de base de la fonction abs est la suivante : abs(x) où x est le paramètre numérique permettant de calculer la valeur absolue, qui peut être un nombre entier ou un nombre à virgule flottante. 2. Exemples de fonction abs Ci-dessous, nous montrerons l'utilisation de la fonction abs à travers quelques exemples spécifiques : Exemple 1 : Calcul

Comment créer des bordures personnalisées dans Microsoft Word Comment créer des bordures personnalisées dans Microsoft Word Nov 18, 2023 pm 11:17 PM

Vous voulez rendre la première page de votre projet scolaire passionnante ? Rien ne le distingue des autres soumissions comme une bordure agréable et élégante sur la page d'accueil de votre classeur. Cependant, les bordures standard sur une seule ligne de Microsoft Word sont devenues très évidentes et ennuyeuses. Par conséquent, nous vous montrons les étapes pour créer et utiliser des bordures personnalisées dans les documents Microsoft Word. Comment créer des bordures personnalisées dans Microsoft Word Créer des bordures personnalisées est très simple. Cependant, vous aurez besoin d'une limite. Étape 1 – Téléchargez les bordures personnalisées Il existe des tonnes de bordures gratuites sur Internet. Nous avons téléchargé une bordure comme celle-ci. Étape 1 – Recherchez sur Internet des bordures personnalisées. Alternativement, vous pouvez accéder au découpage

Introduction aux fonctions Python : utilisation et exemples de la fonction isinstance Introduction aux fonctions Python : utilisation et exemples de la fonction isinstance Nov 04, 2023 pm 03:15 PM

Introduction aux fonctions Python : utilisation et exemples de la fonction isinstance Python est un langage de programmation puissant qui fournit de nombreuses fonctions intégrées pour rendre la programmation plus pratique et efficace. L'une des fonctions intégrées très utiles est la fonction isinstance(). Cet article présentera l'utilisation et des exemples de la fonction isinstance et fournira des exemples de code spécifiques. La fonction isinstance() est utilisée pour déterminer si un objet est une instance d'une classe ou d'un type spécifié. La syntaxe de cette fonction est la suivante

See all articles