So erstellen Sie mit dem linearen CSS3-Verlauf einen Rahmen
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）需要修改参数CSS
background-image: -webkit-linear-gradient(left ,transparent 50%,#222 50%); background-size: 1px 100%; background-position: left;
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: '';
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，那么这种边框效果是怎么实现的呢？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.
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
So passen Sie die Fensterrahmeneinstellungen unter Windows 11 an: Farbe und Größe ändern
Sep 22, 2023 am 11:37 AM
Windows 11 bringt frisches und elegantes Design in den Vordergrund; die moderne Benutzeroberfläche ermöglicht es Ihnen, feinste Details, wie zum Beispiel Fensterränder, zu personalisieren und zu ändern. In diesem Leitfaden besprechen wir Schritt-für-Schritt-Anleitungen, die Ihnen dabei helfen, eine Umgebung zu erstellen, die Ihrem Stil im Windows-Betriebssystem entspricht. Wie ändere ich die Fensterrahmeneinstellungen? Drücken Sie +, um die Einstellungen-App zu öffnen. WindowsIch gehe zu Personalisierung und klicke auf Farbeinstellungen. Farbänderung Fensterränder Einstellungen Fenster 11" Breite="643" Höhe="500" > Suchen Sie die Option Akzentfarbe auf Titelleiste und Fensterrändern anzeigen und schalten Sie den Schalter daneben um. Um Akzentfarben im Startmenü und in der Taskleiste anzuzeigen Um die Designfarbe im Startmenü und in der Taskleiste anzuzeigen, aktivieren Sie „Design im Startmenü und in der Taskleiste anzeigen“.
Wie erzielt man mit reinem CSS3 einen Welleneffekt? (Codebeispiel)
Jun 28, 2022 pm 01:39 PM
Wie erzielt man mit reinem CSS3 einen Welleneffekt? In diesem Artikel erfahren Sie, wie Sie mit SVG- und CSS-Animationen Welleneffekte erstellen.
Verwenden Sie CSS geschickt, um verschiedene seltsam geformte Schaltflächen zu realisieren (mit Code).
Jul 19, 2022 am 11:28 AM
Dieser Artikel zeigt Ihnen, wie Sie mithilfe von CSS auf einfache Weise verschiedene seltsam geformte Schaltflächen realisieren können, die häufig vorkommen. Ich hoffe, dass er Ihnen hilfreich sein wird!
So verstecken Sie Elemente in CSS, ohne Platz zu beanspruchen
Jun 01, 2022 pm 07:15 PM
Zwei Methoden: 1. Fügen Sie mit dem Anzeigeattribut einfach den Stil „display:none;“ zum Element hinzu. 2. Verwenden Sie die Attribute „position“ und „top“, um die absolute Positionierung des Elements festzulegen, um das Element auszublenden. Fügen Sie dem Element einfach den Stil „position:absolute;top:-9999px;“ hinzu.
So erstellen Sie benutzerdefinierte Rahmen in Microsoft Word
Nov 18, 2023 pm 11:17 PM
Möchten Sie, dass die Titelseite Ihres Schulprojekts spannend aussieht? Nichts hebt es so sehr von anderen Einsendungen ab wie ein schöner, eleganter Rahmen auf der Startseite Ihrer Arbeitsmappe. Allerdings sind die standardmäßigen einzeiligen Ränder in Microsoft Word sehr offensichtlich und langweilig geworden. Daher zeigen wir Ihnen die Schritte zum Erstellen und Verwenden benutzerdefinierter Rahmen in Microsoft Word-Dokumenten. So erstellen Sie benutzerdefinierte Rahmen in Microsoft Word Das Erstellen benutzerdefinierter Rahmen ist sehr einfach. Sie benötigen jedoch eine Grenze. Schritt 1 – Benutzerdefinierte Ränder herunterladen Im Internet gibt es jede Menge kostenlose Ränder. Wir haben einen Rand wie diesen heruntergeladen. Schritt 1 – Suchen Sie im Internet nach benutzerdefinierten Rahmen. Alternativ können Sie auch zum Ausschneiden übergehen
So implementieren Sie Spitzenränder in CSS3
Sep 16, 2022 pm 07:11 PM
In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen. Das Attribut „border-image“ kann Bilder zum Erstellen von Rändern verwenden, d. h. zum Hinzufügen eines Hintergrundbilds zum Rand. Sie müssen lediglich das Hintergrundbild als Spitzenstil angeben Bildrandbreite nach innen. Ob der Anfang wiederholt wird;".
Populäre Wissenschaft darüber, wie man Excel-Grenzen setzt
Mar 20, 2024 am 10:30 AM
Es ist nicht ungewöhnlich, dass Excel in unserer täglichen Arbeit und in unserem Leben auftaucht. Ob es um die Erstellung von Mitarbeiterinformationen, Gehaltstabellen oder Studenteneinschreibungsinformationen und Zeugnissen geht, Excel ist ein relativ einfach zu verwendendes Werkzeug. Beim Drucken in Excel müssen Sie Rahmen festlegen, um den Druckanforderungen gerecht zu werden. In diesem Artikel stellt Ihnen der Editor verschiedene Möglichkeiten vor, Excel-Rahmen festzulegen. Methode 1. Verwenden Sie die Funktionsregisterkarte. Diese Methode wird häufig verwendet. Sie ist praktisch und schnell. Der spezifische Vorgang: Wählen Sie den Zellbereich B2:H10 aus, in dem Sie einen Rand hinzufügen möchten - Dropdown-Liste [Rahmen] auf der rechten Schaltfläche – [Alle Frames], um das Hinzufügen von Frames abzuschließen. Methode 2. Wählen Sie den Zellbereich B2:H10 aus, in dem Sie einen Rand hinzufügen möchten.
Es zeigt sich, dass Textkarussell und Bildkarussell auch mit reinem CSS realisierbar sind!
Jun 10, 2022 pm 01:00 PM
Wie erstelle ich ein Textkarussell und ein Bildkarussell? Das erste, woran jeder denkt, ist die Verwendung von js. Tatsächlich können Textkarussell und Bildkarussell auch einen Blick auf die Implementierungsmethode werfen.
