communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

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中文网(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">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</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中文网(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中文网(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">如是颠簸生世亦无悔。</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中文网(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>两个不同的边界样式。</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中文网(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中文网(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简写属性，用于把针对四个边的属性设置在一个声明。
border-style用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color设置元素的下边框的颜色。
border-bottom-style设置元素的下边框的样式。
border-bottom-width设置元素的下边框的宽度。
border-left简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color设置元素的左边框的颜色。
border-left-style设置元素的左边框的样式。
border-left-width设置元素的左边框的宽度。
border-right简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color设置元素的右边框的颜色。
border-right-style设置元素的右边框的样式。
border-right-width设置元素的右边框的宽度。
border-top简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color设置元素的上边框的颜色。
border-top-style设置元素的上边框的样式。
border-top-width设置元素的上边框的宽度。




Formation continue
||
<!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>两个不同的边界样式。</p> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492875 joue