Comment utiliser la propriété CSS border-color ?-tutoriel CSS-php.cn

Comment utiliser la propriété CSS border-color ?

青灯夜游

Libérer： 2020-09-08 11:09:59

original

5739 Les gens l'ont consulté

L'attribut border-color est un attribut raccourci qui peut être utilisé pour définir la couleur des quatre bordures d'un élément, ou pour définir des couleurs différentes pour les quatre côtés.

Comment utiliser la propriété CSS border-color ?

Propriété CSS border-color

Fonction : propriété border-color Utilisé pour définir la couleur de la bordure d'un élément. Vous pouvez définir 1 à 4 valeurs :

border-color:red green blue pink;

Copier après la connexion

● La bordure supérieure est rouge

● La bordure droite est verte

● La bordure inférieure Elle est bleue

● La bordure gauche est rose

border-color:red green blue ;

Copier après la connexion

● La bordure supérieure est rouge

● Les bordures gauche et droite sont vertes

● Bas La bordure est bleue

border-color:red green;

Copier après la connexion

● Les bordures supérieure et inférieure sont rouges

● Les bordures gauche et droite sont vertes

border-color:red;

Copier après la connexion

Quantity Les quatre bordures sont rouges

Remarque : L'attribut border-style doit être déclaré avant l'attribut border-color, car l'élément doit obtenir une bordure avant de changer de couleur. Et la valeur de l'attribut border-style ne peut pas être nulle ou masquée, sinon la bordure n'apparaîtra pas et l'attribut border-color ne prendra pas effet.

Exemple d'utilisation de la propriété CSS border-color

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
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">一个蓝色边框！</p>
<p class="two">一个彩色边框！</p>
<p class="three">一个彩色边框！</p>
<p class="four">一个彩色边框！</p>
<p><b>注：</b>"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。</p>
</body>
</html>

Copier après la connexion

Rendu :

Comment utiliser la propriété CSS border-color ?