Style de bordure CSS
Style de bordure CSS
Vous pouvez utiliser border-style pour définir le style de bordure, ou vous pouvez définir les styles haut, bas, gauche et droite séparément :
border-top-style
border-left-style
border-right-style
border -bottom-style
Il existe de nombreux types de styles de bordure qui peuvent être définis, tels qu'une bordure simple, une bordure en pointillés, une bordure pleine, une bordure double et une bordure sans bordure. .
<html>
<head>
<title>测试内边距</title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<style type="text/css">
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}/*设置3D凹槽边框*/
p.ridge {border-style: ridge}/*设置3D垄状边框*/
p.inset {border-style: inset}/*设置3D inset 边框*/
p.outset {border-style: outset}/*设置3D outset 边框*/
</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">3D凹槽边框</p>
<p class="ridge">3D 垄状边框</p>
<p class="inset">3D inset 边框</p>
<p class="outset"> 3D outset 边框</p>
</body>
</html>Largeur et couleur de la bordure CSS
Largeur de la bordure
La largeur de la bordure est définie par la largeur de la bordure, qui peut être configurée en haut, en bas, respectivement à gauche et à droite. Propriétés
border-top-width
border-bottom-width
border. -left-width
border-right-width
Couleur de la bordure
La largeur de la bordure est définie par la couleur de la bordure, et la Les côtés supérieur et inférieur peuvent également être définis séparément 4 attributs à gauche et à droite
border-top-color
border-bottom-color
border-left -color
border-right-color
<!DOCTYPE html>
<html>
<head>
<title>测试内边距</title>
<meta charset="utf-8">
<!-- 调用CSS样式表 -->
<style type="text/css">
/*定义p标签，是实线边框*/
p {border-style: solid;}
.all {
/*定义所有边框宽度为5像素*/
border-width: 5px;
/*定义所有边框是颜色为橙色*/
border-color: #FF8000
}
.top {
/*定义上边框宽度为5像素*/
border-top-width: 5px;
/*定义上边框是颜色为橙色*/
border-top-color: #FF8000
}
.bottom {
/*定义下边框宽度为5像素*/
border-bottom-width: 5px;
/*定义下边框是颜色为橙色*/
border-bottom-color: #FF8000
}
.left {
/*定义左边框宽度为5像素*/
border-left-width: 5px;
/*定义左边框是颜色为橙色*/
border-left-color: #FF8000
}
.right {
/*定义右边框宽度为5像素*/
border-right-width: 5px;
/*定义右边框是颜色为橙色*/
border-right-color: #FF8000
}
</style>
</head>
<body>
<p class="all">我是设置所有边框的</p>
<p class="top">我只负责上面</p>
<p class="bottom">我负责下面</p>
<p class="left">我设置的是左边</p>
<p class="right">我设置的是右边</p>
</body>
</html>Définir chaque bordure individuellement
En CSS, vous pouvez spécifier différentes bordures sur différents côtés :
Instance
p
{
border -top-style:dotted;
border -right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
ci-dessus Les exemples peuvent également définir un seul attribut :
border-style : pointillé solide ;
l'attribut border-style peut avoir 1 à 4 valeurs :
border-style : pointillé plein double tiret ;
La bordure supérieure est pointillé
La bordure droite est pleine
La bordure inférieure est double
La bordure gauche est en pointillés
border-style : pointillé double solide ;
La bordure supérieure est en pointillés
Les bordures gauche et droite sont pleines
La bordure inférieure est double
border-style : pointillé plein ;
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
La bordure a également l'attribut d'abréviation
bordure : 5px rouge uni ;
