Que signifie CSS solide ?

Border (dessiner une bordure) est une propriété CSS. Vous pouvez l'utiliser pour dessiner des bordures pour les balises HTML qui peuvent déterminer la plage (telles que TD, DIV, etc.). Vous pouvez ajouter des bordures au texte et ajouter des séparateurs. menus de navigation. Permettez-moi de partager un exemple avec vous. Les amis intéressés peuvent en apprendre davantage

Les personnes qui ont créé des pages Web ont l'expérience de se soucier de tracer des lignes. C'est CSS Un attribut de , vous pouvez l'utiliser pour dessiner des bordures pour les balises HTML qui peuvent déterminer la plage (telles que TD, DIV, etc.). Il peut définir le type, la largeur et la couleur de la ligne de bordure. , vous pouvez créer des effets spéciaux.

style="border:thin solid red"

La signification des trois paramètres après "bordure" est : la largeur de la ligne de bordure est : fine (ligne fine) ; ligne continue) ; Couleur de la ligne de bordure : rouge.

La largeur de la ligne de bordure a trois valeurs standards : fine (ligne fine), moyenne (ligne moyennement épaisse) et épaisse (ligne épaisse),

1 Ajouter une bordure. au texte

Dans l'exemple ci-dessus, différentes bordures sont ajoutées à un morceau de texte, juste pour illustrer que la couleur et l'épaisseur de la ligne de bordure sont variables.

Le code CSS de la première bordure est : style="border:thin solid red"

La signification des trois paramètres après "border" est : la largeur de la ligne de bordure est : fin (ligne fine) ; type de ligne de bordure : plein (ligne continue) ; couleur de la ligne de bordure : rouge (rouge).

La largeur de la ligne de bordure a trois valeurs standards : fine (ligne fine), moyenne (ligne moyennement épaisse) et épaisse (ligne épaisse).

De plus, la largeur peut également être. personnalisé, tel que : 1pt, 5px, 2cm, etc.

Le type de ligne de bordure a neuf valeurs définies : aucune (pas de ligne de bordure), pointillé (ligne pointillée composée de points), pointillé (ligne pointillée composée de lignes courtes), solide (ligne continue), double ( double), la largeur de la ligne double plus la largeur de la partie vierge entre elles est égale à la largeur définie par la largeur de la bordure), rainure (bordure en forme de rainure 3D), arête (bordure en forme de crête 3D), encart (bordure en ligne 3D, couleur plus foncée), début (bordure externe 3D, couleur plus claire),

Remarque : si le système ne prend pas en charge les valeurs d'attribut​​de ces bordures, alors "en pointillé", " pointillés", "double", " groove", "ridge", "inset" et "outset" seront tous remplacés par "solid".

Couleur de la ligne de bordure : vous pouvez utiliser un code couleur hexadécimal, tel que #00ffcc.

Comme vous pouvez le voir ci-dessus, il est en effet très simple d'ajouter des bordures au texte. Vous comprendrez les paramètres des bordures suivantes dans l'exemple ci-dessus sans même l'expliquer ! Voici une petite astuce pour vous. Pour ajouter une bordure à un morceau de texte, vous pouvez ajouter du CSS à la balise

. Pour ajouter une bordure à plusieurs morceaux de texte, entourez d'abord ces morceaux de texte avec des balises DIV. puis ajoutez du CSS à la balise

DIV> ; si vous souhaitez ajouter plusieurs bordures différentes à une ligne de texte, vous devez placer le texte dans un tableau, puis ajouter du CSS à la balise respectivement.

2. Ajoutez un séparateur au menu de navigation

La petite ligne blanche dans l'exemple ci-dessus peut bien sûr être réalisée avec une image, mais ici j'utilise l'extension du CSS "border" L'attribut dessine un côté de la bordure, donc le code est bien moindre. Le côté unique de la bordure est similaire aux quatre côtés de la bordure dans l'exemple ci-dessus. Les attributs des quatre côtés d'une bordure sont les suivants :

Nom de la ligne de bordure : border-top (ligne de bordure supérieure). ), border-right (ligne de bordure droite) ), border-bottom (ligne de bordure inférieure) et border-left (ligne de bordure gauche) ; le type, la largeur et la couleur de chaque ligne de bordure sont les mêmes que ceux de l'attribut "boder". Par exemple, dans cet exemple, vous souhaitez définir la ligne de bordure gauche de chaque cellule comme une ligne blanche et la largeur de la ligne comme une ligne continue de « 1px ». Le code CSS est le suivant : style="border-left". : 1px solide #ffffff".

Lors de la définition individuelle de la ligne de bordure, si une certaine valeur n'est pas donnée, sa valeur initiale par défaut sera utilisée. Il est très pratique de définir du CSS dans Dreamweaver sans écrire de code ; il est très pratique de définir une seule fois les lignes de bordure couramment utilisées et de les placer dans un fichier CSS externe. Vous pouvez simplement les appeler lorsque vous en avez besoin.

3. Utilisez des lignes de bordure de différentes largeurs et couleurs dans une bordure

L'effet de cet exemple peut bien sûr être obtenu en utilisant la méthode de l'exemple ci-dessus, mais cela nécessiterait trop de code . Une autre méthode de fusion peut être utilisée pour classer les valeurs d'attribut des quatre côtés ensemble. Par exemple, le code dans cet exemple est le suivant :

style="border-style:solid; border-width: thin thin thick thick;border-color:#00ff00 #00ff00 #0000ff #0000ff" 。

Comme le montre ce qui précède, je. classifié le type et la largeur de la ligne de bordure Il est défini avec la classification des couleurs. Veuillez noter quelques points ici :

1 L'ordre de position des quatre lignes de bordure est : ligne de bordure supérieure, ligne de bordure droite. , bordure inférieure, bordure gauche ;

2. Dans cet exemple, je n'ai choisi qu'un seul type de ligne continue comme type de ligne de bordure. En fait, les quatre côtés peuvent également être définis avec des types différents respectivement ; 🎜>

三、属性值可以定义一个、两个、三个或者四个。如果仅定义一个属性值，则其余三个自动取相同值，如：border-style:solid与border-style:solid solid solid solid的效果完全一样；如果仅给出两个或三个值，那么缺失边的属性值把取与对边相同的值。如：boder-width:thin thick与border-width:thin thick thin thick效果相同，border-width:1px 2px 3px与border-width:1px 2px 3px 2px的效果相同。

Border属性的灵活应用，可以产生许多特殊效果，方法与上面介绍的相同。

例子：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一列固定宽度——</title> 
<style type="text/css"> 
<!-- 
#layout { 
border: 2px solid #A9C9E2; 
background-color: #E8F5FE; 
height: 200px; 
width: 300px; 
} 
--> 
</style> 
</head> 
<body> 
<div id="layout">hfhfg</div> 
</body> 
</html>

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!