Ein Artikel zum Erlernen von CSS3-Bildrändern

Mit der CSS3-Eigenschaft „border-image“ können Sie einen Bildrahmen um ein Element festlegen.

1. Browserunterstützung

Die Nummer in der Tabelle gibt die erste Browserversion an, die die Eigenschaft vollständig unterstützt.

Bei Verwendung muss der Nummer das Präfix -webkit- oder -moz- vorangestellt werden.

2. CSS3-Rahmenbildeigenschaft

Mit der CSS3-Eigenschaft „border-image“ können Sie ein Bild angeben, das anstelle des normalen Rahmens um ein Element verwendet werden soll. Eine Eigenschaft besteht aus drei Teilen:

• Das als Rahmen zu verwendende Bild.
• Wo das Bild segmentiert werden soll.
• Legen Sie fest, ob der Mittelteil wiederholt oder verlängert werden soll.

Nehmen Sie als Beispiel das folgende Bild (genannt „border.png“):

Prinzipanalyse:

Die Border-Image-Eigenschaft unterteilt das Bild in neun Abschnitte, wie ein Tic-Tac-Toe-Brett. Anschließend werden die Ecken an den Ecken platziert und der Mittelteil in der angegebenen Reihenfolge wiederholt bzw. gestreckt.

Beachten:

Damit das Rahmenbild ordnungsgemäß funktioniert, müssen für das Element auch Rahmeneigenschaften festgelegt sein!

1. Der mittlere Teil des Bildes wird wiederholt, um einen Rand zu erstellen, und das Bild wird als Rahmen verwendet

CSS Code:

<!DOCTYPE CSS>

<CSS lang="de">

<Kopf>

  <meta charset="UTF-8">

  <title>Projekt</title>

</Kopf>

<Text>

  <p id="borderimg">Hier wird die Bildmitte erweitert, um den Rahmen zu bilden.</p>

  <p>Hier ist das Originalbild:</p><img src="img/border.png">

</body>

</CSS>

Der Code lautet wie folgt:

#borderimg {

    Rand: 10px durchgehend transparent;

    Polsterung: 15px;

    -webkit-border-image: url(img/border.png) 30 runden; /* Safari 3.1-5 */

    -o-border-image: url(img/border.png) 30 runden; /* Opera 11-12.1 */

    Rahmenbild: URL (Bild/Bord.png) 30 rund;

}

2. Die Bildmitte wird erweitert, sodass ein Rand entsteht: Bild als Rand nutzen!

Beispielcode:

#borderimg {

                Rand: 10px durchgehend transparent;

                Polsterung: 15px;

                -webkit-border-image: URL (img/border.png) 30 strecken;

                /* Safari 3.1-5 */

                -o-border-image: URL (img/border.png) 30 strecken;

                /* Opera 11-12.1 */

                Rahmenbild: URL (Bild/Bord.png) 30 strecken;

            }

Hinweis: Die Eigenschaft border-image ist eine Abkürzung für border-image-source, border-image-slice, border-image-width, border-image-outset und border-image-repeat.

1. Unterschiedliche Slice-Werte

Unterschiedliche Slice-Werte verändern das Erscheinungsbild des Rahmens vollständig:

Beispiel 1

Rahmenbild: URL (Rahmen.png) 50 rund;

#borderimg1 {

Rand: 10px durchgehend transparent;

Polsterung: 15px;

-webkit-border-image: URL (img/border.png) 50 runden;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 50 runden;

/* Opera 11-12.1 */

Rahmenbild: URL (Bild/Bord.png) 50 rund;

}

Beispiel 2

Rahmenbild: URL (Rahmen.png) 20 % rund;

#borderimg2 {

Rand: 10px durchgehend transparent;

Polsterung: 15px;

-webkit-border-image: URL (img/border.png) 20 % rund;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 20 % rund;

/* Opera 11-12.1 */

Rahmenbild: URL (Bild/Bord.png) 20 % rund;

}

Beispiel 3

Rahmenbild: URL (Rahmen.png) 30 % rund;

Der Code lautet wie folgt:

#borderimg3 {

Rand: 10px durchgehend transparent;

Polsterung: 15px;

-webkit-border-image: URL (img/border.png) 30 % rund;

/* Safari 3.1-5 */

-o-border-image: url(img/border.png) 30 % rund;

/* Opera 11-12.1 */

Rahmenbild: URL (Bild/Bord.png) 30 % rund;

}

Abschluss

Dieser Artikel basiert auf den Grundlagen von CSS und verwendet die CSS-Sprache, um die Wissenspunkte zur CSS-Definition von Bildrändern vorzustellen. Er beginnt mit den grundlegenden Attributkonzepten, der Verwendung von Rahmenbildern und den Problemen, die bei praktischen Anwendungen beachtet werden müssen, und gibt eine ausführliche Erklärung. Durch Demonstration von Beispielen. Ich hoffe, dies hilft Ihnen, CSS besser zu lernen.

Wenn Sie mehr über Python-Webcrawler und Data Mining erfahren möchten, können Sie die professionelle Website besuchen: http://pdcfighting.com/

Dies ist das Ende dieses Artikels zum Erlernen von CSS3-Bildrändern in einem Artikel. Weitere relevante Inhalte zu CSS3-Bildrändern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!