Heim >Web-Frontend >CSS-Tutorial >Beispielcode-Freigabe zum Erstellen von Rahmen mithilfe des linearen Farbverlaufs von CSS3
Beispielcode-Freigabe zum Erstellen von Rahmen mithilfe des linearen Farbverlaufs von CSS3
- 高洛峰Original
- 2017-03-09 17:16:541836Durchsuche
Linien mit linearem Farbverlauf eignen sich sehr gut für die Erstellung von Rändern, insbesondere für die Verwendung ihrer Striche, um einige kopierte Randeffekte zu erzeugen. Hier sehen wir uns den Beispielcode für die Verwendung von CSS3 mit linearem Farbverlauf zur Erstellung von Rändern an
Im Allgemeinen beträgt die Strichlinie des App-Rands weniger als ein Pixel, daher habe ich den 1-Pixel-Rand wie gewohnt direkt nachgezeichnet. Obwohl er 1 Pixel groß war, war das Ergebnis völlig anders als der Strich in der App, „dick“. Also habe ich online gesucht, ob es eine Lösung gibt, konnte sie aber nach einer Weile nicht finden. Was soll ich tun, wenn die Nachfrageseite nicht so grob sein will, dann muss ich sie lösen ich selbst.
Also habe ich die vorherige Methode verwendet, um an den linearen Gradienten zu denken
.line li{ border: none;
background-image: -webkit-linear-gradient(#222 50%,transparent 50%);
background-image: -moz-linear-gradient(#222 50%,transparent 50%);
background-image: -o-linear-gradient(#222 50%,transparent 50%);
background-image: linear-gradient(#222 50%,transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottombottom;}<ul class="line">
<li>linear-gradient</li>
<li>linear-gradient</li>
<li>linear-gradient</li>
</ul>
Okay, es kam wieder heraus, aber es ist immer noch ein wenig fehlerhaft, also hier ist das Problem: Um die Strichposition (links, oben, rechts, unten) zu ändern, müssen Sie die Parameter
ändern. Beispielsweise muss der linke Strich geändert werden:
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%); background-size: 1px 100%; background-position: left;
Nichts Spezifisches einzeln aufgeführt.
Verwenden Sie Linear, um komplexe Randeffekte zu erzeugen
Außerdem habe ich im Internet eine Methode gesehen, mit der das Attribut „Linear-Gradient“ verwendet werden kann, um einen wunderschönen Randeffekt zu erzeugen. Zuerst wird der Code angegeben:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box {
margin: 80px 30px;
width: 200px;
height: 200px;
position: relative;
background: #fff;
float: left;
}
.box:before {
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
}
.first:before {
background-image: linear-gradient(90deg, yellow, gold);
}
.second:before {
background-image: linear-gradient(0deg, orange, red);
}
.third:before {
background-image: repeating-linear-gradient(-45deg,#cc2a2d,#cc2a2d 30px,#f2f2f2 30px,#f2f2f2 40px,#0e71bb 40px,#0e71bb 70px,#f2f2f2 70px,#f2f2f2 80px);
}
</style>
</head>
<body>
<p class="box first"></p>
<p class="box second"></p>
<p class="box third"></p>
</body>
</html>
Wie Sie dem Code entnehmen können, haben wir tatsächlich Ich habe es nicht verwendet. Wie wird dieser Grenzeffekt erreicht?
Die allgemeine Idee ist, dass wir zuerst ein weißes p und dann ein farbiges p definieren, das ein Kreis ist, der größer als ein weißes Quadrat ist. Überlappen Sie die beiden und lassen Sie das weiße P das farbige P bedecken, um den Effekt einer Umrandung zu erzielen.
Hier werden viele CSS-Wissenspunkte verwendet.
1. :before-Pseudoklasse
Aus dem obigen Code können wir ersehen, dass wir tatsächlich eine :before-Pseudoklasse im definierten weißen p definieren und alle Stile der farbigen Quadrate hier einfügen. Dies liegt daran, dass die Verwendung der :before-Definition die Positionierung einfacher machen kann. Passen Sie einfach oben und links die Breite des Rahmens an. Gleichzeitig werden beide zu einem Ganzen.
2. linear-gradient
Viele Browser unterstützen diese CSS-Methode. Diese Methode verfügt über die folgenden drei Verwendungsmodi:
①background:linear-gradient(top,#fff,#000)
Dieser Code bedeutet, dass er oben bei Weiß beginnt und unten zu Schwarz übergeht.
②background:linear-gradient(top,right,#fff,#000)
Dieser Code übergibt zwei Parameter über die Position, oben und rechts, was bedeutet, dass er oben rechts beginnt und nach unten links wechselt. Es gibt noch andere Gründe. Die gleichen wie beim ersten.
③background:linear-gradient(30deg,#fff,#000)
Der erste Parameter dieses Codes übergibt den Winkel. Tatsächlich sind das Prinzip und die Position gleich, aber sie ändern sich nicht von der Standardposition . . Was ist also die entsprechende Beziehung zwischen Winkel und Position? Experimenten zufolge entsprechen 0 Grad der Unterseite, 90 Grad der linken Seite, 180 Grad der oberen Seite und 360 Grad der rechten Seite.
Das Obige ist der Code und die Erklärung für die Verwendung der linearen Methode zum Erreichen wunderschöner Grenzen. Sie können sie lokal implementieren, um weitere neuartige Kombinationsimplementierungsmethoden zu entdecken.
Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe zum Erstellen von Rahmen mithilfe des linearen Farbverlaufs von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!