Résumé de l'utilisation des attributs de bordure en CSS

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

2. Regarder

"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 CSS

1) 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èzes

b.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 : pixels

border-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).

4. Un résumé de la méthode d'utilisation de l'attribut border de CSS pour construire une bordure déformée

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 ; >

border-width : top, bottom, left ;

border-width : quatre directions

border-style border-color peut également être défini comme ceci ;

6.

CSS : attribut de bordure

Extension des connaissances

De nombreux concepteurs ont utilisé les connaissances répertoriées dans ce chapitre jusqu'à présent, cependant, il existe des moyens de les développer davantage. !

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

[Recommandations associées]

1. Tutoriel vidéo gratuit sur le site Web PHP chinois :

"php.cn Dugu Jiujian (2 ) -Tutoriel vidéo CSS》

2. Tutoriel vidéo gratuit pour le site Web PHP chinois :

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!