Heim > Artikel > Web-Frontend > Beispielanalyse der Verwendung von Linear in CSS zum Erstellen komplexer Randeffekte

Beispielanalyse der Verwendung von Linear in CSS zum Erstellen komplexer Randeffekte

高洛峰Original: 2017-03-13 17:35:131938Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von Linear in CSS zum Erstellen komplexer Randeffekte und Analysebeispiele vorgestellt. Verwendung des linearen Farbverlaufs Attribut zum Erstellen wunderschöner Randeffekte

I Habe es online gesehen. Eine Möglichkeit, das Attribut „linear-gradient“ zu verwenden, um einen wunderschönen Randeffekt zu erzeugen. Zuerst wird der Code angezeigt. Sie können die Wirkung auf Ihrem Computer überprüfen:

<!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: &#39;&#39;;     
                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>

Sie können den sehen Code: Tatsächlich verwenden wir keinen Rand. Wie wird dieser Randeffekt 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. :beforePseudoklasse

Aus dem obigen Code können wir ersehen, dass wir tatsächlich eine im definierten weißen p definieren: Die Vor der Pseudoklasse werden hier alle Stile farbiger Quadrate aufgeführt. 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 mittlerweile diese CSS-Methode. Diese Methode verfügt über die folgenden drei Verwendungsmodi:
①background:linear-gradient(top,#fff,#000)
Die Bedeutung dieses Codes ist, dass von oben beginnend weiß ist, nach unten Übertreiben Sie es mit Schwarz.
②background:linear-gradient(top,right,#fff,#000)
Dieser Code übergibt zwei Parameter über die Position, oben und rechts, was bedeutet, dass von oben rechts begonnen wird Änderungen unten links, andere Prinzipien sind 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, jedoch nicht von der Standardposition . Die Dinge beginnen sich zu ändern. Was ist also die entsprechende Beziehung zwischen Winkel und Position? Experimenten zufolge entspricht 0 Grad unten, 90 Grad entspricht links, 180 Grad entspricht oben und 360 Grad entspricht rechts.

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 vonBeispielanalyse der Verwendung von Linear in CSS zum Erstellen komplexer Randeffekte. 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：Vollständiger Code zur Implementierung der CSS3-DeckkraftNächster Artikel：Vollständiger Code zur Implementierung der CSS3-Deckkraft

In Verbindung stehende Artikel

Mehr sehen