Heim > Artikel > Web-Frontend > So erstellen Sie mit dem linearen CSS3-Verlauf einen Rahmen

So erstellen Sie mit dem linearen CSS3-Verlauf einen Rahmen

不言Original: 2018-06-09 15:56:012368Durchsuche

Dieser Artikel stellt hauptsächlich vor, wie man den linearen Farbverlauf von CSS3 verwendet. Es hat einen bestimmten Referenzwert. Jetzt kann ich es mit Ihnen teilen.

lineare Farbverlaufslinien ist sehr leistungsfähig zum Erstellen von Rändern, insbesondere können seine Striche zum Erstellen einiger kopierter Randeffekte verwendet werden. Hier sehen wir uns ein Beispiel für die Verwendung von CSS3 linear-gradient zum Erstellen von Rändern an.

Allgemeine Apps Die Randstrichlinien waren alle kleiner als ein Pixel, also habe ich wie üblich direkt einen 1-Pixel-Rand nachgezeichnet, aber das Ergebnis war völlig anders und „dicker“ als der Strich in der App, also habe ich im Internet danach gesucht Ich suche nach einer Lösung, habe sie aber nach einer Weile nicht gefunden. Was soll ich tun, wenn die Nachfrageseite nicht so grob sein will, dann muss ich sie selbst lösen?
Also habe ich die vorherige Methode verwendet, um an linear-gradient

CSS

.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;}

XML/HTML

<ul class="line">
    <li>linear-gradient</li>
    <li>linear-gradient</li>
    <li>linear-gradient</li>
</ul>OK，又出来了，但还是有点瑕疵，那么问题来了，就是改变描边位置（left，top，right，bottom）需要修改参数

Wenn der linke Strich geändert werden muss:

CSS

background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%);   
background-size:  1px 100%;   
background-position: left;

Die Details werden nicht 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. Sie können die Auswirkung auf Ihrem Computer überprüfen:

CSS

<!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>    有代码可以看出，其实我们并没有使用border，那么这种边框效果是怎么实现的呢？

Die allgemeine Idee ist, dass wir zuerst ein weißes p definieren und dann definiere a Das weiße Quadrat ist ein größerer Kreis mit einem farbigen p. Ü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 bequemer 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 gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie CSS3 zum Abfangen von Zeichenfolgen

Beispiele für die Verwendung von reinem CSS zum Erzielen dynamischer Texteffekte

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit dem linearen CSS3-Verlauf einen Rahmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css css3 html xml 字符串伪类 background

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：Analyse des Kaskadenmechanismus in CSSNächster Artikel：Analyse des Kaskadenmechanismus in CSS

In Verbindung stehende Artikel

Mehr sehen