Heim > Web-Frontend > CSS-Tutorial > So stellen Sie in CSS 4 Rahmenfarben unterschiedlich ein

So stellen Sie in CSS 4 Rahmenfarben unterschiedlich ein

青灯夜游
Freigeben: 2023-01-07 11:42:13
Original
5785 Leute haben es durchsucht

In CSS können Sie die Eigenschaften border-top-color, border-bottom-color, border-left-color und border-right-color verwenden, um die Farben des oberen Rands, des unteren Rands, des linken Rands usw. festzulegen rechten Rand bzw.

So stellen Sie in CSS 4 Rahmenfarben unterschiedlich ein

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

css legt 4 Ränder mit verschiedenen Farben fest Randfarbe

border Die Eigenschaft -bottom-color kann die Farbe des unteren Randes festlegen. Die Eigenschaft border-left-color kann die Farbe des linken Randes festlegen. Die Eigenschaft border-right-color kann die Farbe des rechten Randes festlegen So stellen Sie in CSS 4 Rahmenfarben unterschiedlich einCSS-Farbe


In CSS können Farbwerte mit Farbnamen, Prozentsätzen, Zahlen und Hexadezimalwerten geschrieben werden. So stellen Sie in CSS 4 Rahmenfarben unterschiedlich ein


1) Farbnamen verwenden

  • 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.

  • Tabelle 1: Von CSS-Spezifikationen empfohlene Farbnamen

    Reines Schwarz

  • Silber
  • Hellgrau

  • Marineblau
  • Dunkelblau

BlauHellblauGrün

Dunkel grünLimette

hellgrün

blaugrün

indigohimmelblau tiefes Lilahellgelb Es wird nicht empfohlen, Farbnamen zu verwenden Webseiten, insbesondere bei großflächiger Nutzung, um zu vermeiden, dass einige Farbnamen vom Browser nicht analysiert oder anders angezeigt werden. Unterschiede in der Art und Weise, wie Farben vom Gerät interpretiert werden. 2) Verwenden Sie Prozentsätze
color: rgb(100%, 100%, 100%);
Nach dem Login kopieren
3) Verwenden Sie numerische Werte
color: rgb(255, 255, 255);
Nach dem Login kopieren
4) Hexadezimale Farbe
color: #ffffff;
Nach dem Login kopieren
color: #RRGGBB;
Nach dem Login kopieren
CSS-Video-Tutorial
aqua
kastanienbraun tiefrot rot groß. rot lila
Fuchsia Magenta oliv braun gelb
grau dunkelgrau weiß Muschelweiß
.
Dies ist die gebräuchlichste Methode, zum Beispiel: Diese Anweisung setzt die drei Primärfarben Rot, Blau und Grün auf ihre Maximalwerte und die resultierende Kombination wird als angezeigt Weiß. Setzen Sie stattdessen rgb(0%, 0%, 0%) auf Schwarz. Wenn die drei Prozentwerte gleich sind, wird Grau angezeigt. Je nachdem, welcher Prozentwert größer ist, wird welche Primärfarbe bevorzugt. Zahlen reichen von 0 bis 255, zum Beispiel: Die obige Anweisung wird weiß angezeigt, im Gegenteil, sie kann auf rgb(0, 0) eingestellt werden , 0), erscheint schwarz. Wenn die drei Werte gleich sind, ist die Anzeige grau. Ebenso hat der größere Wert einen größeren Anteil an der Primärfarbe.
Dies ist die am häufigsten verwendete Methode zur Farbauswahl, zum Beispiel: Dabei muss vor der Hexadezimalzahl ein #-Farbsymbol hinzugefügt werden. Die obige Anweisung zeigt Weiß an. Im Gegensatz dazu können Sie #000000 auf Schwarz setzen, beschrieben durch RGB: von 0~255, tatsächlich entspricht 255 in Dezimalzahl genau FF in hexadezimal, Ein hexadezimaler Farbwert entspricht 3 Gruppen solcher hexadezimalen Werte, die in der angegebenen Reihenfolge den drei Primärfarben Rot, Blau und Grün entsprechen. (Teilen von Lernvideos: )

Das obige ist der detaillierte Inhalt vonSo stellen Sie in CSS 4 Rahmenfarben unterschiedlich ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage