Heim > Artikel > Web-Frontend > So legen Sie die Rahmenfarbe per CSS fest

So legen Sie die Rahmenfarbe per CSS fest

青灯夜游Original: 2021-07-14 13:50:002520Durchsuche

In CSS können Sie die Eigenschaften border-color, border-top-color, border-bottom-color, border-left-color und border-right-color verwenden, um die Rahmenfarbe des Elements festzulegen.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

CSS-Eigenschaft zum Festlegen der Rahmenfarbe

Eigenschaft	Beschreibung
border-bottom-color	Legen Sie die untere Rahmenfarbe eines Elements fest.
border-left-color	Legen Sie die linke Randfarbe eines Elementsymbols fest.
border-right-color	Legen Sie die rechte Randfarbe eines Elements fest.
border-top-color	Legen Sie die obere Randfarbe eines Elements fest.
border-color	Legen Sie die vier Randfarben eines Elements fest.

Die Eigenschaft „border-color“ ist eine Abkürzungseigenschaft, die vier Rahmenfarben in einer Deklaration festlegen kann und 1 bis 4 Farben festlegen kann.

Dieses Attribut kann die Farbe der sichtbaren Teile aller Ränder eines Elements oder unterschiedliche Farben für die 4 Seiten festlegen.

Beispiel:

border-color:red green blue pink;

Der obere Rand ist rot
Der rechte Rand ist grün
Der untere Rand ist blau
Der linke Rand ist rosa

border-color:red green blue;

Das Obermaterial Der Rand ist rot
```
border-color:dotted red green;
```
Alle 4 Ränder sind rot
Beispiel 1:
```
border-color:red;
```

Beispiel 2:

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

In CSS können Farbwerte verwendet werden Farbnamen. Es gibt vier Möglichkeiten, Prozentsätze, Zahlen und Hexadezimalwerte zu schreiben.

1) Farbnamen verwenden

So legen Sie die Rahmenfarbe per CSS fest

Obwohl es derzeit etwa 184 benannte Farben gibt, werden sie tatsächlich von verschiedenen Browsern unterstützt, und es werden nur 16 Farbnamen als CSS-Spezifikationen empfohlen, wie in der Tabelle unten gezeigt.

So legen Sie die Rahmenfarbe per CSS fest Tabelle 1: Von CSS-Spezifikationen empfohlene Farbnamen

Reines Schwarz

SilberHellgrau

Marineblau

Dunkelblau

Blau

Hellblau

Grün

Dunkel grünLimettehellgrünblaugrünindigoaquahimmelblau kastanienbrauntiefrotrotgroß. rotlila tiefes LilaFuchsiaMagentaolivbraungelb hellgelbgraudunkelgrauweißMuschelweiß

不建议在网页中使用颜色名，特别是大规模的使用，避免有些颜色名不被浏览器解析，或者不同浏览器对颜色的解释差异。

2) 使用百分比

这是一种最常用的方法，例如：

color: rgb(100%, 100%, 100%);

这个声明将红、蓝、绿 3 种原色都设置为最大值，结果组合显示为白色。相反，可以设置rgb(0%, 0%, 0%)为黑色。3 个百分值相等将显示灰色，同理哪个百分值大就偏向哪个原色。

3) 使用数值

数字范围从 0~255，例如：

color: rgb(255, 255, 255);

上面这个声明将显示白色，相反，可以设置为rgb(0, 0, 0)，将显示黑色。3 个数值相等将显示灰色，同理哪个数值大哪个原色的比重就会加大。

4) 十六进制颜色

这是最常用的取色方法，例如：

color: #ffffff;

其中要在十六进制前面加一个#颜色符号。上面这个声明将显示白色，相反，可以设置#000000为黑色，用 RGB 来描述：

color: #RRGGBB;

从 0~255，实际上十进制的 255 正好等于十六进制的 FF，一个十六进制的颜色值等于 3 组这样的十六进制的值，它们按顺序连接在一起就等于红、蓝、绿3种原色。

（学习视频分享：css视频教程）

Das obige ist der detaillierte Inhalt vonSo legen Sie die Rahmenfarbe per CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ist CSS eine Programmiersprache?Nächster Artikel：Ist CSS eine Programmiersprache?

In Verbindung stehende Artikel

Mehr sehen