Wie kann ich „border-image-slice' effektiv mit linearen Verlaufsrändern verwenden?

Wie funktioniert border-image mit linear verlaufenden Rändern?

Die Eigenschaft border-image-slice gibt Kantenversätze für Rasterbilder oder an Koordinaten für Vektorbilder. Gemäß der CSS-Spezifikation kann dieser Wert eine Zahl ohne Einheit sein, die Pixel für Rasterbilder oder relative Koordinaten für Vektorbilder darstellt. Bei der Verwendung eines Farbverlaufs treten jedoch gewisse Komplexitäten auf.

Farbverlaufsrahmenbild

In Ihrem Beispiel haben Sie ein Farbverlaufsrahmenbild wie folgt definiert:

border-image: repeating-linear-gradient(45deg, #000, #000 1.5%, transparent 1.5%, transparent 5%) 80;

Hier gibt die 80 die Größe des Bildausschnitts an. Bei Verwendung eines Farbverlaufs wird davon ausgegangen, dass die Größe des Bildes der Größe des Elements entspricht. Die „border-image-width“ definiert die 9 Regionen, in denen die Slices platziert werden (oder „border-width“ wird verwendet, wenn nicht definiert).

Border-image-slice verstehen

Gemäß der Spezifikation berücksichtigt die Eigenschaft „border-image-slice“ das ursprüngliche Bild, um die Slices zu erstellen. Wenn Sie einen Wert ohne Einheit angeben (wie in Ihrem Beispiel 80), wird dieser als Pixelwert interpretiert. Ein Prozentwert wird anhand der Größe des Elements aufgelöst.

Slicing und Regionen

Um ein optimales Ergebnis zu erzielen, sollten die Slices den durch die Grenze definierten Regionen entsprechen -Bildbreite. In Ihrem Fall stellt 80 80 Pixel dar, da Sie einen Rand von 5em haben (was 5x16px = 80px ist). Dies bedeutet, dass das Slice die gleiche Größe wie der Rand hat, wodurch sichergestellt wird, dass der Farbverlauf korrekt ausgerichtet ist.

Zusammenfassend lässt sich sagen, dass bei der Verwendung eines Farbverlaufs-Randbildes border-image-slice mit border-image-wid (oder border -width), um die Slices perfekt an den Regionen auszurichten.

Das obige ist der detaillierte Inhalt vonWie kann ich „border-image-slice' effektiv mit linearen Verlaufsrändern verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!