Heim > Artikel > Web-Frontend > Ausführliche Erklärung zur Implementierung des Rahmenfarbverlaufscodes in CSS
Ausführliche Erklärung zur Implementierung des Rahmenfarbverlaufscodes in CSS
- 伊谢尔伦Original
- 2017-07-19 11:06:1910730Durchsuche
Wenn in CSS eine Randlinie eine Breite von n Pixeln hat, dann können dafür n verschiedene Farben eingestellt werden.
Im Code können wir eine durchgezogene Linie mit einer Breite von 7 Pixeln definieren: border: 7px solid #C8C8C8 (Die hier eingestellte Farbe ist egal, sie wird im Folgenden neu sein Code in Firefox Die eingestellte Farbe wird überschrieben)
Wenn Sie die Verlaufsfarbe für die vier Ränder des Rahmens gleichzeitig festlegen, wie im folgenden Code gezeigt:
<html>
<head>
<style>
p{
height: 100px;
width: 100px;
border: 7px solid red;
border-color: red green yellow black;
}
</style>
</head>
<body>
<p></p>
</body>
</html>🎜 >
Nachdem wir die HTML-Datei ausgeführt haben, erhalten wir folgenden Effekt:Oben, rechts, unten und links werden im Uhrzeigersinn zugewiesen. Wenn wir nur drei Farben festlegen, ist das Ergebnis offensichtlich und sie werden direkt den Rändern in den drei Richtungen oben, rechts und unten zugeordnet. Um dem Code mitzuteilen, dass wir die Rahmenfarbe nicht gemäß dieser Regel festlegen möchten, sollten wir die Verlaufsfarbe für den Rahmen in jede Richtung separat festlegen. Der Code lautet wie folgt:
Das Ausführungsergebnis lautet wie folgt: 
Die Grenzfarbeneinstellung ist von außen nach innen, sodass der erste Farbcode die äußerste Farbe ist und der letzte Farbcode die innerste Farbe ist.
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zur Implementierung des Rahmenfarbverlaufscodes in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!