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:1910771Durchsuche

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!

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：Detaillierte Erläuterung einiger Beispielverwendungscodes von Border-Eigenschaften in CSS3Nächster Artikel：Detaillierte Erläuterung einiger Beispielverwendungscodes von Border-Eigenschaften in CSS3

In Verbindung stehende Artikel

Mehr sehen