Wie funktioniert Border-Image-Slice mit einem Hintergrund mit Farbverlauf in CSS?

Border-Image in Verlaufshintergründen: Nummer 80 verstehen

In CSS können wir mit Border-Image ein Raster- oder Vektorbild als verwenden ein Rand um ein Element. Bei Anwendung auf einen Hintergrund mit Farbverlauf, wie im bereitgestellten Code zu sehen ist, kann die Syntax einige Fragen zur Funktionsweise der Eigenschaft „border-image-slice“ aufwerfen.

Gemäß den CSS-Spezifikationen stellt „border-image-slice“ eine dar Kantenversatz in Pixel für Rasterbilder. Bei einem Hintergrund mit Farbverlauf ist er jedoch relativ zur Größe des Elements.

Im bereitgestellten Beispiel ist der Wert „border-image-slice“ auf 80 festgelegt. Dieser Wert ist einheitenlos, was bedeutet, dass er angenommen wird in Pixel sein. In diesem Fall ist also 80 Pixel die Größe des Bildes, das zum Erstellen des Rahmens verwendet wird.

Die Eigenschaft „border-image-width“ definiert die Breite des Rahmens. In diesem Beispiel ist es auf 5em eingestellt, was ungefähr dem Fünffachen der Schriftgröße des Elements entspricht. Dies bedeutet, dass der Rand auf allen Seiten 5 cm breit ist.

Der Schlüssel zum Verständnis der Wechselwirkung dieser Werte besteht darin, zu erkennen, dass das ursprüngliche Bild so skaliert ist, dass es der Größe des Rahmens entspricht. In diesem Fall ist das Ausgangsbild der Hintergrund mit Farbverlauf. Daher wird der Hintergrund mit Farbverlauf auf eine Breite von 80 Pixel und eine Höhe von 5 cm skaliert.

Die Eigenschaft „border-image-slice“ definiert dann, wie dieses skalierte Bild in neun Bereiche aufgeteilt wird. Diese Regionen werden dann wie folgt um das Element herum platziert:

• Die oberen und linken Regionen werden als obere/linke Ecken des Rahmens platziert.
• Die unteren und rechten Regionen werden platziert als die unteren/rechten Ecken des Rahmens.
• Die Regionen auf beiden Seiten der Ober-/Unterseite werden gestreckt, um sie an die Breite des Rahmens anzupassen.
• Die Regionen auf beiden Seiten der linken Seite /right werden gestreckt, um der Höhe des Rahmens zu entsprechen.

Der border-image-slice-Wert von 80 Pixel in diesem Beispiel bedeutet also, dass der skalierte Hintergrund mit Farbverlauf in neun 80 Pixel große Quadrate geschnitten wird. Diese Quadrate werden dann wie oben beschrieben um das Element herum platziert, um den Rand zu bilden.

Durch Anpassen der Werte „border-image-slice“ und „border-image-width“ können Sie das Erscheinungsbild des Randes steuern. Das Experimentieren mit verschiedenen Werten kann Ihnen helfen, den gewünschten Effekt für Ihr Design zu erzielen.

Das obige ist der detaillierte Inhalt vonWie funktioniert Border-Image-Slice mit einem Hintergrund mit Farbverlauf in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!