Was soll ich tun, wenn der IOS-Seitenrand nicht angezeigt werden kann? Beispiel-Tutorial für ein Randbild

Letzten Freitag erhielt ich plötzlich eine Anfrage von der Website, eine mobile Modellarbeiter-Anzeigeseite zu erstellen. Der Künstler vor Ort schickte die Prototypzeichnungen. Es sieht so aus:

Ehrlich gesagt möchte ich mich wirklich über die Ästhetik unserer Künstler beschweren, aber darum geht es nicht.

Da der Rand ein spezielles Muster erfordert, plane ich, ihn mit border-image zu implementieren.

  .example{
    ……

    border:6px solid transparent;
    -webkit-border-image:url(../img/border_img.jpg) 6 6 round;
    border-image:url(../img/border_img.jpg) 6 6 round;
    ……
  }

Endlich festgestellt, dass die Android-Anzeige normal war. IOS-Ränder werden nicht angezeigt.

Die Lösung ist:
Ersetzen Sie border:6px solid transparent durch separate Eigenschaften, nämlich: border-style und border-width.

  .example{
    ……
    border-style: solid;
    border-width: 6px;
    -webkit-border-image:url(../img/border_img.jpg) 6 6 round;
    border-image:url(../img/border_img.jpg) 6 6 round;
    ……
  }

Ich hoffe, es hilft allen.

[Verwandte Empfehlungen]

1. Kostenloses h5-Online-Video-Tutorial

2. HTML5-Vollversionshandbuch

3. php.cn Original-HTML5-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn der IOS-Seitenrand nicht angezeigt werden kann? Beispiel-Tutorial für ein Randbild. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!