Comment définir la couleur de la bordure CSS-Questions et réponses frontales-php.cn

Comment définir la couleur de la bordure CSS

青灯夜游

Libérer： 2021-07-14 13:50:00

original

2549 Les gens l'ont consulté

En CSS, vous pouvez utiliser les propriétés border-color, border-top-color, border-bottom-color, border-left-color et border-right-color pour définir la couleur de la bordure de l'élément.

Comment définir la couleur de la bordure CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Propriété CSS pour définir la couleur de la bordure

属性	描述
border-bottom-color	设置一个元素的底部边框颜色。
border-left-color	设置一个元素象的左边边框颜色。
border-right-color	设置一个元素的右边边框颜色。
border-top-color	设置一个元素的顶部边框颜色
border-color	设置一个元素的四个边框颜色。

La propriété border-color est une propriété abrégée qui peut définir quatre couleurs de bordure dans une seule instruction et peut définir 1 à 4 couleurs.

Cet attribut peut définir la couleur des parties visibles de toutes les bordures d'un élément, ou définir des couleurs différentes pour les 4 côtés.

Exemple :

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 est bleue
La bordure gauche est rose

border-color:red green blue;

Copier après la connexion

Le haut la bordure est rouge
Les bordures droite et gauche sont vertes
La bordure inférieure est bleue

border-color:dotted red green;

Copier après la connexion

Les bordures supérieure et inférieure sont rouges
Les bordures droite et gauche sont vertes

border-color:red;

Copier après la connexion

Les 4 bordures sont rouges

Exemple 1 :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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">单色边框！</p>
<p class="two">双色边框！</p>
<p class="three">三色边框！</p>
<p class="four">四色边框！</p>
</body>
</html>

Copier après la connexion

Comment définir la couleur de la bordure CSS

Exemple 2 :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p.four
{
	border-style:solid;
	border-top-color:#ff0000;
	border-bottom-color:#0000ff;
	border-left-color:rgb(250,0,255);
	border-right-color:#00ff00;
}
</style>
</head>

<body>

<p class="four">四色边框！</p>
</body>
</html>

Copier après la connexion

Comment définir la couleur de la bordure CSS

Couleur CSS

En CSS, les valeurs de couleur peuvent utiliser noms de couleurs , Il existe quatre façons d'écrire des pourcentages, des nombres et des valeurs hexadécimales.

1) Utiliser des noms de couleurs

Bien qu'il existe actuellement environ 184 couleurs nommées, elles sont véritablement prises en charge par divers navigateurs, et il n'y a que 16 noms de couleurs recommandés comme spécifications CSS, comme indiqué dans le tableau ci-dessous.

表1：CSS 规范推荐的颜色名称
名称	颜色	名称	颜色	名称	颜色
black	纯黑	silver	浅灰	navy	深蓝
blue	浅蓝	green	深绿	lime	浅绿
teal	靛青	aqua	天蓝	maroon	深红
red	大红	purple	深紫	fuchsia	品红
olive	褐黄	yellow	明黄	gray	深灰
white	壳白