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

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

Bordure CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]