Heim Web-Frontend Front-End-Fragen und Antworten So implementieren Sie Spitzenränder in CSS3

So implementieren Sie Spitzenränder in CSS3

Sep 16, 2022 pm 07:11 PM
css css3

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

So implementieren Sie Spitzenränder in CSS3

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS können Sie das Attribut „border-image“ verwenden, um einen Spitzenrand zu erzielen.

CSS-Border-Image-Attribut

Das Border-Image-Attribut kann Bilder verwenden, um Ränder zu erstellen, dh dem Rand ein Hintergrundbild hinzuzufügen. Richtig, Bilder können auch in den üblichen kleinen Randstreifen eingefügt werden.

border-image ist ein Kurzattribut:

  • border-image-source: Wird verwendet, um die Position des Bildes anzugeben, das zum Zeichnen des Randes verwendet werden soll.

  • border-image-slice: Der Bildrand ist versetzt nach innen

  • border-image-width: Die Breite des Bildrandes

  • border-image-outset: Wird verwendet, um die Menge des außerhalb des Randes gezeichneten border-image-Bereichs anzugeben

  • border-image- wiederholen: Wird verwendet, um das Bild festzulegen. Ob der Rand wiederholt, gestreckt oder abgerundet werden soll.

Ausgelassene Werte werden auf ihre Standardwerte gesetzt.

1. Randbildquelle: url()

Legen Sie den Pfad des Randbildes fest

2. Randbildausschnitt: 100 100 100 100 Füllung

Beginnen Sie mit Teilen Sie das Bild an 4 Positionen (in der Reihenfolge oben, rechts, unten und links).

Sie können 5 Parameter eingeben. Die ersten 1 bis 4 Parameter sind entsprechend der Position der Zeile unterteilt. Sie sind in der Reihenfolge oben, rechts, unten und links unterteilt Es werden zwei Werte bereitgestellt: „oben“ und „unten“ sowie „links“ und „rechts“, wobei 1 Wert die Position von 4 Zeilen festlegt. Beachten Sie, dass nur Zahlen und Prozentsätze eingegeben werden können und keine Pixel hinzugefügt werden können. 100 ist gleich 100px

Wie ist die Teilungsmethode? Sehen Sie sich das Bild unten für eine detaillierte Erklärung an. Es sieht vielleicht etwas chaotisch aus, aber wenn Sie genau hinschauen, können Sie es trotzdem verstehen. Die blaue Zahl 9 ist der Inhaltsbereich. Wenn die fünfte Parameterfüllung nicht ausgefüllt ist, ist sie leer.

3. Randbildbreite: 1

Legen Sie die Breite des Randbilds fest. Sie können die Zahl festlegen, und px gibt an, wie oft es ist. Wenn es 1 ist, ist es 1 * Randbreite, und es kann auch „Auto“ eingestellt werden. Die Berechnungsmethode von auto besteht darin, den Wert von border-image-slice zu nehmen und dann px hinzuzufügen. Wenn der Wert von border-image-slice 100 ist, dann nehmen Sie ihn und addieren px, um 100px zu erhalten.

4. border-image-outset: 100px 100px 100px 100px

Auf der Originalbasis wird oben rechts unten links um 100px erweitert, was gekürzt werden kann. Sie können auch Zahlen festlegen, und das Gleiche gilt für Zahlen. Es bedeutet mehrmals. 1 steht für 1 Mal, also 1* border-width(100) = 100px1* border-width(100) = 100px

 

5、border-image-repeat: 

参数:stretch  repeat  round  space

5, border-image-repeat:

Parameter: stretch repeat round spaceSo kacheln. Sie können zwei Parameter eingeben, einen Parameter, der die gleiche Kachelung in vier Richtungen darstellt. Zwei Parameter, der erste Wert repräsentiert die horizontale Richtung und der zweite Wert repräsentiert die vertikale Richtung.

Die online aufgenommenen Screenshots sind nicht gut, daher befindet sich in der Mitte ein kleiner roter Punkt, ignorieren Sie ihn einfach. Diese Methode ist im Allgemeinen nicht sehr kompatibel und wird nur dann festgelegt, wenn besondere Umstände vorliegen.

Abschließend noch die Abkürzung:

🎜🎜Es können nur drei Parameter ausgefüllt werden. Durch „Slice and Repeat“ können mehrere Werte ausgefüllt werden. 🎜
border-image: url(./img/Snipaste_2019-07-16_16-39-16.png) 100 space;                
/* 简写: 三个参数  source  slice  repeat */
🎜 (Lernvideo-Sharing: 🎜CSS-Video-Tutorial🎜, 🎜Web-Frontend🎜)🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Spitzenränder in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

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

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP-Tutorial
1535
276
Was sind die Apps für virtuelle Währungshandel? _Die Top Ten empfohlene offizielle Apps Virtual Currency Trading Apps im Jahr 2025 Was sind die Apps für virtuelle Währungshandel? _Die Top Ten empfohlene offizielle Apps Virtual Currency Trading Apps im Jahr 2025 Aug 08, 2025 pm 06:42 PM

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.

So verwenden Sie VW- und VH -Einheiten in CSS So verwenden Sie VW- und VH -Einheiten in CSS Aug 07, 2025 pm 11:44 PM

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.

So erstellen Sie eine vertikale Linie mit CSS So erstellen Sie eine vertikale Linie mit CSS Aug 11, 2025 pm 12:49 PM

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.

So verwenden Sie die Filtereigenschaft in CSS So verwenden Sie die Filtereigenschaft in CSS Aug 11, 2025 pm 05:29 PM

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

So verwenden Sie CSS -Selektoren effektiv So verwenden Sie CSS -Selektoren effektiv Aug 11, 2025 am 11:12 AM

Bei der Verwendung von CSS-Selektoren sollten zuerst niedrig spezifische Selektoren verwendet werden, um übermäßige Einschränkungen zu vermeiden. 1. Verstehen Sie die Spezifitätsniveau und verwenden Sie sie in der Reihenfolge von Typ, Klasse und ID vernünftigerweise; 2. Verwenden Sie Mehrzweck-Klassennamen, um die Wiederverwendbarkeit und Wartbarkeit zu verbessern. 3.. Verwenden Sie Attribute und Pseudo-Klasse-Selektoren, um Leistungsprobleme zu vermeiden. 4. Halten Sie den Selektor kurz und klar; 5. Verwenden Sie BEM und andere Namensschwerpunkte, um die strukturelle Klarheit zu verbessern. 6. Vermeiden Sie den Missbrauch von Tag-Selektoren und: N-ten Kind und geben Sie der Verwendung von Werkzeugklassen oder modularen CSS Vorrang, um sicherzustellen, dass der Stil für lange Zeit kontrollierbar ist.

CSS Mix-Blend-Mode-Beispiel CSS Mix-Blend-Mode-Beispiel Aug 08, 2025 pm 12:59 PM

Das Mix-Blend-Mode-Attribut wird verwendet, um den Mischungseffekt von Elementinhalt und Hintergrund zu steuern. 1. Multiplizieren können die Überlappung von Text- und Hintergrundbildern erreichen. 2. Bildschirm hellt das Bild auf und eignet sich für dunkle Hintergründe. 3. Die Überlagerung verbessert den Kontrast und kombiniert Multiplikations- und Bildschirmfunktionen. 4. Unterschied schafft einen starken Kontrast, der für kreatives Design geeignet ist. Es ist notwendig, sicherzustellen, dass sich Elemente überlappen und die richtige Z-Index-Stapelreihenfolge und in Kombination mit Isolation: Isolat, der Mischbereich begrenzt sein und reichhaltige visuelle Effekte können erreicht werden, indem Farben und Modi angepasst werden.

So ändern Sie den Listenstil in CSS So ändern Sie den Listenstil in CSS Aug 17, 2025 am 10:04 AM

Um den CSS-Listenstil zu ändern, verwenden Sie zunächst den Typ Listenstil, um die Kugel- oder Nummerierungsstil zu ändern. 1. Verwenden Sie den Typ Listenstil, um die Kugel von UL auf Scheibe, Kreis oder Quadrat einzustellen, und die Anzahl der OL ist dezimal, unter-alpha, obere Alpha, untere Röme oder Oberroman. 2. Entfernen Sie das Tag vollständig mit Listenstil: Keine. 3. Verwenden Sie das Listen-Stil: URL ('bullet.png'), um es durch ein benutzerdefiniertes Bild zu ersetzen. 4. Verwenden Sie Listen-Stil-Positionen: in

Wie man einen Linienbruch in CSS verhindert Wie man einen Linienbruch in CSS verhindert Aug 08, 2025 pm 05:14 PM

Usewhite-Space: NowRaptopReVventTextFromBreakingontomultiplelinines, sicherstellen, dass ContentStaysonasingLine

See all articles