


Was macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code)
Im Prozess der Front-End-Entwicklung wird manchmal linear-gradient verwendet, um verschiedene Effekte zu erzielen. In diesem Kapitel wird Ihnen vorgestellt. Was macht die linear-gradient()-Funktion in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code) . Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
1. Was ist CSS linear-gradient()?
1. Definieren Sie die
css-Linear-Gradient-Funktion, die zum Erstellen eines linearen Gradienten-„Bildes“ verwendet wird.
2. Verwendung
Um einen linearen Farbverlauf zu erstellen, müssen Sie einen Startpunkt und eine Richtung (angegeben als Winkel) des Farbverlaufseffekts festlegen. Sie müssen auch die Endfarbe definieren. Die Stoppfarbe ist der sanfte Übergang, den Gecko erzeugen soll. Sie müssen mindestens zwei angeben. Sie können jedoch auch weitere Farben angeben, um komplexere Verlaufseffekte zu erzeugen.
Beispiel (3 Stoppfarben angeben):
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */ background: linear-gradient(red,yellow,blue); /* 标准语法 */
Rendering:
Im Beispiel ist keine Richtung angegeben, um eine lineare Darstellung zu erreichen Farbverlauf, sodass der Effekt standardmäßig von oben nach unten erzielt wird. Sie können auch eine Richtung (Winkel) angeben, um den Effekt zu erzielen, zum Beispiel:
Geben Sie eine Richtung an (von links nach rechts):
background: -webkit-linear-gradient(right,red,yellow,blue); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(right,red,yellow,blue); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right,red,yellow,blue); /* Firefox 3.6 to 15 */ background: linear-gradient(to right,red,yellow,blue);/* 标准语法 */
Geben Sie eine Richtung (45-Grad-Winkel) an:
background: linear-gradient(45deg,red,yellow,blue); /* 标准语法 */
Gleichzeitig können Sie auch ein Gefälle erzielen Transparenzeffekt (Transparenz definieren):
background: -webkit-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); /*Standard*/
2. Legen Sie einen kreisförmigen Rand mit linearem Farbverlauf mit CSS (Code) fest
Prinzip:
Erstellen Sie zunächst zwei Quadrate unterschiedlicher Größe, die übereinander gelegt werden
Verwenden Sie das Attribut „Rahmen abgerundete Ecken“: border-radius, um den abgerundeten Winkel des Rahmens auf 100 % festzulegen
Mit linear-gradient() die Verlaufsfarbe des äußeren Kreises hinzufügen, wird Folgendes erstellt:
Code :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边框渐变的圆形</title> <style> .border1{ width: 200px; height: 200px; margin:100px auto; position: relative; border: 1px solid transparent; border-radius: 100%; background: white; background-clip: padding-box; padding: 10px; } .border1::after{ position: absolute; top: -40px; bottom: -40px; left: -40px; right: -40px; background: linear-gradient(45deg,red, blue); content: ''; z-index: -1; border-radius: 100%; } </style> </head> <body> <div class="border1"></div> </body> </html>
Beispiel Es ist ganz einfach. Sie können es üben oder auf dieser Basis Modifikationen vornehmen, wie zum Beispiel: Halbkreis...
Das obige ist der detaillierte Inhalt vonWas macht die Funktion linear-gradient() in CSS? Implementieren Sie einen kreisförmigen Rand mit linearem Farbverlauf (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

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)

1. Binance ist bekannt für sein riesiges Transaktionsvolumen und die reichhaltigen Handelspaare. Es bietet diversifizierte Handelsmodelle und perfekte Ökosysteme. Es gewährleistet auch die Sicherheit von Benutzeranlagen über SAFU -Fonds und mehrere Sicherheitstechnologien und erhält den konformen Vorgängen von großer Bedeutung. 2. OKX Ouyi bietet eine breite Palette von Handelsdiensten für digitale Asset und einheitliche Handelskonto -Modelle, bereitet das Web3 -Feld aktiv bereit und verbessert die Sicherheit und Erfahrung der Transaktion durch strenge Risikokontrolle und Benutzerausbildung. 3.. Gate.io Sesam öffnet die Tür und verfügt über eine gute Währungsgeschwindigkeit und eine reichhaltige Währung, bietet diversifizierte Handelsinstrumente und Wertschöpfungsdienste, nimmt mehrere Sicherheitsüberprüfungsmechanismen an und hält sich an die Transparenz von Asset-Reserven zur Verbesserung des Benutzervertrauens. V.

Die: Leerepseudo-KlasseSelectSselementsWithnochildrenorContent, einschließlich Spacesorcomponenten, SoonlyTryEmptyElementslikematchit; 1.itcanhideemptyContainersByusing: leer {display: none;} tocleanuPlayouts; 2.itallowsaddingPlaceLylingsSylingvise :::.

VW- und VH -Einheiten erreichen reaktionsschnelles Design, indem sie Elementgrößen mit Ansichtsfenster und Höhe in Verbindung bringen. 1 VW entspricht 1% der Ansichtsfensterbreite, und 1 VH entspricht 1% der Ansichtsfensterhöhe; häufig im Vollbildbereich, reaktionsschnellen Schriftarten und elastischen Abstand verwendet; 1. Verwenden Sie im Vollbildbereich 100VH oder besser 100DVH, um den Einfluss der Mobile Browser -Adressleiste zu vermeiden. 2. Responsive Schriftarten können mit 5 VW begrenzt und mit einer Klemme (1,5REM, 3VW, 3REM) in Kombination der minimalen und maximalen Größe begrenzt werden. 3. Elastischer Abstand wie Breite: 80VW, Rand: 5VHAUTO, Polsterung: 2VH3VW, kann das Layout anpassungsfähig machen; Achten Sie auf Kompatibilität, Zugänglichkeit und Inhaltskonflikte für mobile Geräte. Es wird empfohlen, zuerst DVH zu verwenden.

ThecssFilterPropertyAllowsvisualeffects-ähnlich, Helligkeit und GryscaletobeAppliedDirecttoHtmlelements.1) Usethesyntaxfilter: Filterfunktion (Wert) toappyeffects.2) Kombination

Verwenden Sie einen DIV mit Rand, um schnell vertikale Linien zu erstellen und Stile und Höhen zu definieren, indem Sie randlinks und Höhe einstellen. 2. Verwendung :: vor oder :: Nach Pseudoelementen, um vertikale Linien ohne zusätzliche HTML-Tags hinzuzufügen, die für die dekorative Trennung geeignet sind; 3. In Flexbox -Layout können adaptive vertikale Trennwände zwischen elastischen Behältern erreicht werden, indem die Breite und die Hintergrundfarbe der Trennklasse festgelegt werden. 4. Fügen Sie in CSSGrid vertikale Linien als unabhängige Spalten (z. B. Autowidth -Spalten) in das Gitterlayout ein, das für reaktionsschnelles Design geeignet ist. Die am besten geeignete Methode sollte gemäß dem spezifischen Layout ausgewählt werden, um sicherzustellen, dass die Struktur einfach und leicht zu warten ist.

Die CSS-Pseudo-Klasse ist ein Schlüsselwort, mit dem der spezielle Zustand eines Elements definiert wird. Es kann dynamisch Stile anwenden, basierend auf Benutzerinteraktion oder Dokumentenort. 1.: Hover wird ausgelöst, wenn die Maus schwebt, z. B. die Taste: HOVER ändert die Knopffarbe. 2.: Fokus wirkt sich in Wirksamkeit, wenn das Element den Fokus erhält und die Zugänglichkeit verbessert. 3.: nt-child () wählt Elemente nach Position aus und unterstützt ungerade, sogar oder Formeln wie 2n 1; 4.: Erstkind und: Last-Kind Wählen Sie die ersten bzw. letzten Kinderelemente aus; 5.:Not () schließt Elemente aus, die den angegebenen Bedingungen entsprechen; 6.: Besuchen und: Link -Set -Stile basierend auf dem Linkzugriffsstatus, aber: Besucht wird durch Privatsphäre eingeschränkt.

Die häufigste und empfohlene Methode zum Entfernen von CSS -Klassen aus DOM -Elementen unter Verwendung von JavaScript ist die Methode von REME () der Classlist -Eigenschaft. 1. Verwenden Sie Element.ClassList.remove ('className'), um einen einzelnen oder mehrere Klassen sicher zu löschen, und es wird kein Fehler gemeldet, selbst wenn die Klasse nicht vorhanden ist. 2. Die alternative Methode besteht darin, die Eigenschaft der Klassenname direkt zu bedienen und die Klasse mit einem String -Austausch zu entfernen. Aufgrund der ungenauen regelmäßigen Übereinstimmung oder einer unsachgemäßen Raumverarbeitung ist es jedoch einfach, Probleme zu verursachen, sodass sie nicht empfohlen wird. 3. Sie können zuerst beurteilen, ob die Klasse existiert, und sie dann durch Element.ClassList.Contains () löschen, aber es ist normalerweise nicht erforderlich. 4. Classlist

Usewhite-Space: NowRaptopReVventTextFromBreakingontomultiplelinines, sicherstellen, dass ContentStaysonasingLine
