Bordure CSS
CSS Bordure
La bordure CSS peut être une ou plusieurs lignes entourant le contenu et le remplissage d'un élément. Pour ces lignes, vous pouvez personnaliser leur style, leur largeur et leur couleur. . En utilisant les propriétés de bordure CSS, nous pouvons créer de meilleurs effets qu'en HTML.
Propriété CSS Border
La propriété CSS border vous permet de spécifier le style et la couleur de la bordure d'un élément.
Style de bordure
La propriété de style de bordure spécifie le type de bordure à afficher. L'attribut
border-style est utilisé pour définir le style de la bordure.
valeur border-style :
aucun : la valeur par défaut est non border
dotted : dotted : Définir un cadre en pointillés
dashed : Définir un cadre en pointillés
solid : Définir une frontière solide
double : Définir deux frontières . La largeur des deux bordures et la valeur de border-width sont les mêmes
groove : Définissez la limite du groove 3D. L'effet dépend de la valeur de couleur de la bordure
crête : Définit la bordure de la crête 3D. L'effet dépend de la valeur de couleur de la bordure
encart : Définit une bordure intégrée en 3D. L'effet dépend de la valeur de couleur de la bordure
départ : Définit une bordure saillante 3D. L'effet dépend de la valeur de couleur de la bordure
Essayez ceci : Définissez le style de bordure
Largeur de la bordure
Vous pouvez passer le Attribut border-width as La bordure spécifie la largeur.
Il existe deux manières de spécifier la largeur de la bordure : vous pouvez spécifier une valeur de longueur, telle que 2px ou 0,1em ; ou utiliser l'un des 3 mots-clés, qui sont fin, moyen (par défaut) et épais.
Remarque : CSS ne définit pas la largeur spécifique des 3 mots-clés, donc un agent utilisateur peut définir mince, moyen et épais sur 5 px, 3 px et 2 px respectivement, tandis qu'un autre agent utilisateur Les proxys sont définis respectivement sur 3px, 2px et 1px.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
</style>
</head>
<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Couleur de la bordure
La bordure- L'attribut color est utilisé. Définissez la couleur de la bordure. Couleurs pouvant être définies :
name - Spécifiez le nom de la couleur, tel que "rouge"
RGB - Spécifiez la valeur RVB , tel que "rgb( 255,0,0)"
Hex - Spécifiez une valeur hexadécimale, telle que "#ff0000"
Vous pouvez également définir la bordure. La couleur est "transparente".
Remarque : border-color ne fonctionne pas lorsqu'il est utilisé seul. Vous devez d'abord utiliser border-style pour définir le style de bordure.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
</style>
</head>
<body>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Bordure - Définissez chaque côté individuellement
En CSS, vous pouvez spécifier différentes bordures sur différents côtés :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html> Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
L'exemple ci-dessus peut également définir un seul attribut :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
border-style:dotted solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
l'attribut border-style peut avoir 1 à 4 valeurs :
border-style : pointillé plein double tiret ;
<🎜 >- La bordure supérieure est en pointillés
- La bordure droite est pleine
- La bordure inférieure est double
- La bordure gauche est en pointillés
style de bordure : double solide en pointillés ;
- La bordure supérieure est en pointillés
- Les bordures gauche et droite sont pleines
- Le bas la bordure est double
style de bordure : pointillé solide ;
- Le les bordures supérieure et inférieure sont en pointillés
- Les bordures droite et gauche sont pleines
border-style : pointillé ;
- Les bordures à quatre côtés sont en pointillés
Border - attribut raccourci L'exemple ci-dessus utilise de nombreux attributs pour définir la bordure. T Vous pouvez également définir la bordure dans une propriété. Vous pouvez le définir dans l'attribut "border":
- border-width
- border-style (obligatoire)
- border-color
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>Exécuter l'instance » Cliquez sur le bouton « Exécuter l'exemple » pour afficher des exemples en ligne
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
border-style:solid;
border-top:thick double #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>Exécuter l'instance»Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p {border-style:solid;}
p.none {border-bottom-style:none;}
p.dotted {border-bottom-style:dotted;}
p.dashed {border-bottom-style:dashed;}
p.solid {border-bottom-style:solid;}
p.double {border-bottom-style:double;}
p.groove {border-bottom-style:groove;}
p.ridge {border-bottom-style:ridge;}
p.inset {border-bottom-style:inset;}
p.outset {border-bottom-style:outset;}
</style>
</head>
<body>
<p class="none">No bottom border.</p>
<p class="dotted">A dotted bottom border.</p>
<p class="dashed">A dashed bottom border.</p>
<p class="solid">A solid bottom border.</p>
<p class="double">A double bottom border.</p>
<p class="groove">A groove bottom border.</p>
<p class="ridge">A ridge bottom border.</p>
<p class="inset">An inset bottom border.</p>
<p class="outset">An outset bottom border.</p>
</body>
</html>Exécuter l'instance»Cliquez sur "Exécuter l'instance" bouton pour afficher l'instance en ligne
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
border-style:solid;
border-left-width:15px;
}
</style>
</head>
<body>
<p><b>注意:</b>"border-left-width" 单独使用没有效果.要先使用 "border-style" 属性设置borders.</p>
</body>
</html>Exécuter l'instance»Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.one
{
border-style:solid;
border-color:#0000ff;
}
p.two
{
border-style:solid;
border-color:#ff0000 #0000ff;
}
p.three
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff;
}
p.four
{
border-style:solid;
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>
</head>
<body>
<p class="one">One-colored border!</p>
<p class="two">Two-colored border!</p>
<p class="three">Three-colored border!</p>
<p class="four">Four-colored border!</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置 borders .</p>
</body>
</html>Exécuter l'instance»Cliquez sur "Exécuter l'instance" bouton pour voir l'exemple en ligne
Cet exemple montre comment définir la couleur de quatre bordures. Une à quatre couleurs peuvent être définies.
Instance : Définir la couleur de la bordure droite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
border-style:solid;
border-right-color:#ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour visualiser l'instance en ligne
Propriété de frontière CSS
| Propriété | Description |
|---|---|
| frontière | Attribut abrégé, utilisé pour définir les attributs de quatre côtés dans une seule instruction. |
| border-style | est utilisé pour définir le style de toutes les bordures d'un élément, ou définir le style de bordure pour chaque côté individuellement. |
| border-width | Attribut raccourci, utilisé pour définir la largeur de toutes les bordures d'un élément, ou définir la largeur de chaque bordure individuellement . |
| border-color | Attribut raccourci, définit la couleur de la partie visible de toutes les bordures de l'élément ou définit la couleur de chacune des 4 côtés. |
| border-bottom | attribut raccourci, utilisé pour définir tous les attributs de la bordure inférieure en une seule instruction. |
| border-bottom-color | Définit la couleur de la bordure inférieure de l'élément. |
| border-bottom-style | Définissez le style de la bordure inférieure de l'élément. |
| border-bottom-width | Définissez la largeur de la bordure inférieure de l'élément. |
| border-left | Attribut raccourci, utilisé pour définir tous les attributs de la bordure gauche en une seule instruction. |
| border-left-color | Définit la couleur de la bordure gauche de l'élément. |
| border-left-style | Définissez le style de la bordure gauche de l'élément. |
| border-left-width | Définit la largeur de la bordure gauche de l'élément. |
| border-right | attribut raccourci, utilisé pour définir tous les attributs de la bordure droite en une seule instruction. |
| border-right-color | Définit la couleur de la bordure droite de l'élément. |
| border-right-style | Définissez le style de la bordure droite de l'élément. |
| border-right-width | Définit la largeur de la bordure droite de l'élément. |
| border-top | attribut raccourci, utilisé pour définir tous les attributs de la bordure supérieure en une seule instruction. |
| border-top-color | Définit la couleur de la bordure supérieure de l'élément. |
| border-top-style | Définissez le style de la bordure supérieure de l'élément. |
| border-top-width | Définit la largeur de la bordure supérieure de l'élément. |
