Les amis qui découvrent CSS peuvent penser que l'attribut border n'est qu'un simple dessin de bordure. En fait, border contrôle la largeur de la bordure, la couleur, la ligne pointillée, la ligne continue et d'autres styles de l'objet. Vous pouvez contrôler une seule frontière ou toutes les frontières. Plus d'effets peuvent être créés à l'aide de l'attribut border. En CSS, vous pouvez utiliser la syntaxe de bordure pour apporter diverses modifications de conception à la bordure, telles que définir la largeur, le style, la couleur, etc. Vous pouvez également masquer la bordure. En principe, CSS ne se limite pas à la bordure. design. La bordure du bloc p ou du span peut également être appliquée à la bordure d'autres éléments de la page Web, comme la bordure du titre de la page Web, la bordure de l'image (bordure img)... etc. Tous les principaux navigateurs sont pris en charge. l'attribut CSS border. Ce qui suit est une explication détaillée de l’utilisation de l’attribut border.
Apprenez d'abord des cours gratuits liés au site Web chinois php
Apprendre"Démarrage rapide HTML/CSS" <.>Cours de style de bordure CSS
"Tutoriel vidéo CSS et CSS3 de la Geek Academy"Modèle de boîte CSS-BordureTutoriel vidéo
propriété de bordure de frontière 1.
Introduction détaillée à l'attribut border de CSS1) border-width : ne prend pas en charge les pourcentages, prend en charge les mots-clés, mince (1px), moyen (valeur par défaut, 3px , la raison pour laquelle la valeur par défaut est 3px est que border-style n'est efficace que lorsque la bordure est de 3px et plus
fruit), épaisse (5px)2) border-style : Là sont des valeurs différentes. Ce qui suit analyse les applications de différentes valeurs.
a.solid : Peut réaliser des triangles et des trapèzesb.dashed : Ligne pointillée, dans le navigateur Chrome/Firefox, ligne pointillée et solide ; le rapport de la ligne est de 3:1 (fin), dans le navigateur IE, le rapport est de 2:1 (dense) c.dotted : ligne pointillée, dans le navigateur Chrome/Firefox, ce sont des points carrés, dans le navigateur IE, c'est un point (vous pouvez utiliser des points pour obtenir un effet de coin arrondi d.double : double ligne, règle de calcul, la largeur de la double ligne est toujours égale, et la l'intervalle entre eux est +-1, par exemple, 3px=1 (à l'intérieur) + 1 (intervalle central) + 1 (à l'extérieur), vous pouvez obtenir un graphique à trois barres e.inset (concave intérieur ; ), début (convexe extérieur), crête (rainure) ) : style obsolète, mauvaise compatibilité, aucun scénario d'utilisation
Explication détaillée de l'attribut border de. css styleborder-width Property définit la largeur de la bordure
Valeurs possibles : pixelsborder-style Property définit le style de la bordure
Valeurs possibles : plein (ligne droite), pointillé (ligne pointillée), pointillé (ligne de points)L'attribut border-color définit la couleur de la bordure Valeurs possibles : rouge, #f00, #ff0000, rgb(255,0,0), transparent Attribut border-left définition de la bordure gauche la propriété border-right définit la bordure droite la propriété border-top définit la bordure supérieure la propriété border-bottom définit la bordure inférieure 3. Utilisation d'une bordure que vous ne connaissez pas Idée : Lorsque le bord inférieur est parallèle à la ligne horizontale, on contrôle directement le rapport hauteur/largeur pour obtenir l'effet triangle souhaité. ; quand il ne coïncide pas avec la ligne horizontale Cela devient plus compliqué à ce stade. Nous devons utiliser le rapport hauteur/largeur et le combiner avec l'attribut transform et le faire pivoter en CSS3 pour que notre triangle affiche l'effet souhaité (voici juste un introduction à l'idée, pas une mise en œuvre spécifique, qui implique Pour en savoir plus sur les mathématiques, vous pouvez utiliser Baidu vous-même). border, comme son nom l'indique, signifie bordure en CSS, vous pouvez utiliser la syntaxe de bordure pour apporter de nombreuses modifications de conception à la bordure, telles que la définition de la largeur, du style, de la couleur, etc. de la bordure, et vous pouvez également masquer la bordure. En principe, la conception de la bordure CSS ne se limite pas à. les bordures de p blocs ou travées, mais peut également être appliqué à Sur les bordures d'autres éléments de page Web, tels que la bordure du titre de la page Web, la bordure de l'image (bordure img), etc., tous les principaux navigateurs prennent en charge l'attribut CSS border. 5. Explication de l'ombre du triangle de bordure et des bordures multiples Les bordures peuvent être définies individuellement en fonction de la direction, haut, bas, gauche et droite, bordure en haut | border-bottom | border-left | border-right ; Les attributs peuvent donc également être définis individuellement, border-top-width | border-top-color ; Les attributs simples peuvent également être écrits en combinaison : border-width : top, right, bottom, left (dans le sens des aiguilles d'une montre) border-width : top, left, right, bottom ; > 6. Arêtes multiples Lors de l'application de plusieurs arêtes à un élément, vous pouvez vous référer à diverses techniques. Style de bordure solide, pointillé et pointillé sont les valeurs d'attribut de style de bordure les plus couramment utilisées, et il existe plusieurs autres valeurs que nous pouvons utiliser, notamment rainure et crête. Questions et réponses connexes 1 À propos du paramètre 0,5 px de la bordure CSS ? 2. Exception de style de bordure FireFox 3 À propos de l'image de bordure 4. Comment implémenter les coins arrondis des images de bordure en CSS3
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
