Bordure CSS
Bordure CSS
Propriété de bordure CSS
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 permet de définir le style de la bordure
valeur border-style :
aucun : Pas de bordure par défaut
pointillé : pointillé : Définir une bo?te en pointillés
pointillé : Définir une bo?te en pointillés
solide : Définir une ligne continue Boundary
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 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
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>
<body>
<p class="none">無(wú)邊框。</p>
<p class="dotted">虛線邊框。</p>
<p class="dashed">虛線邊框。</p>
<p class="solid">實(shí)線邊框。</p>
<p class="double">雙邊框。</p>
<p class="groove"> 凹槽邊框。</p>
<p class="ridge">壟狀邊框。</p>
<p class="inset">嵌入邊框。</p>
<p class="outset">外凸邊框。</p>
<p class="hidden">隱藏邊框。</p>
</body>
</html>Exécutez le programme pour essayer ?a
Largeur de la bordure
Vous pouvez spécifier la largeur de la bordure via la propriété border-width.
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中文網(wǎng)(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>
</body>
</html>Remarque?: L'attribut "border-width" n'a aucun effet s'il est utilisé seul. Vous devez d'abord définir la bordure à l'aide de l'attribut "border-style".
Exécutez le programme et essayez-le
Border color
La propriété border-color est utilisé pour définir 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, telle que "rgb(255,0,0) "
Hex - Spécifiez une valeur hexadécimale, telle que "#ff0000"
Vous pouvez également définir la couleur de la bordure sur "transparent".
Remarque?: border-color ne fonctionne pas lorsqu'il est utilisé seul. Border-style doit d'abord être utilisé pour définir le style de bordure.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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">山河拱手，為君一笑 。</p>
<p class="two">如是顛簸生世亦無(wú)悔。</p>
</body>
</html>Exécutez le programme et essayez-le
Bordure - définir chacun individuellement C?tés
En CSS, vous pouvez spécifier différentes bordures pour différents c?tés?:
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>兩個(gè)不同的邊界樣式。</p>
</body>
</html> Exécutez le programme et essayez-le
L'attribut border-style peut avoir 1 à 4 valeurs?:
border-style?: pointillé solide 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 bordure?: double uni pointillé?;
-
La bordure supérieure est en pointillés
Les bordures gauche et droite sont pleines
La bordure inférieure est double
style bordure?: pointillé uni?;
Haut et bordures inférieures Il est en pointillé
Les bordures droite et gauche sont pleines
-
border-style:dotted;
Les bordures des quatre c?tés sont en pointillés
L'exemple ci-dessus utilise le style Border. Cependant, il peut également être utilisé avec border-width et border-color.
Bordure - attribut abrégé
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
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
border:5px solid red;
}
</style>
</head>
<body>
<p>段落中的一些文本。</p>
</body>
</html>Exécuter le programme et essayez-le
Plus d'exemples
Définissez la couleur des quatre bordures
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>
</body>
</html>Exécutez le programme pour l'essayer
Propriété de bordure CSS
| 屬性 | 描述 |
|---|---|
| border | 簡(jiǎn)寫(xiě)屬性，用于把針對(duì)四個(gè)邊的屬性設(shè)置在一個(gè)聲明。 |
| border-style | 用于設(shè)置元素所有邊框的樣式，或者單獨(dú)地為各邊設(shè)置邊框樣式。 |
| border-width | 簡(jiǎn)寫(xiě)屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨(dú)地為各邊邊框設(shè)置寬度。 |
| border-color | 簡(jiǎn)寫(xiě)屬性，設(shè)置元素的所有邊框中可見(jiàn)部分的顏色，或?yàn)?4 個(gè)邊分別設(shè)置顏色。 |
| border-bottom | 簡(jiǎn)寫(xiě)屬性，用于把下邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-bottom-color | 設(shè)置元素的下邊框的顏色。 |
| border-bottom-style | 設(shè)置元素的下邊框的樣式。 |
| border-bottom-width | 設(shè)置元素的下邊框的寬度。 |
| border-left | 簡(jiǎn)寫(xiě)屬性，用于把左邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-left-color | 設(shè)置元素的左邊框的顏色。 |
| border-left-style | 設(shè)置元素的左邊框的樣式。 |
| border-left-width | 設(shè)置元素的左邊框的寬度。 |
| border-right | 簡(jiǎn)寫(xiě)屬性，用于把右邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-right-color | 設(shè)置元素的右邊框的顏色。 |
| border-right-style | 設(shè)置元素的右邊框的樣式。 |
| border-right-width | 設(shè)置元素的右邊框的寬度。 |
| border-top | 簡(jiǎn)寫(xiě)屬性，用于把上邊框的所有屬性設(shè)置到一個(gè)聲明中。 |
| border-top-color | 設(shè)置元素的上邊框的顏色。 |
| border-top-style | 設(shè)置元素的上邊框的樣式。 |
| border-top-width | 設(shè)置元素的上邊框的寬度。 |
