Que dois-je faire si la bordure de la page IOS ne peut pas être affichée ? exemple de tutoriel d'image de bordure

Vendredi dernier, j'ai soudainement reçu une demande du site pour créer une page d'affichage des travailleurs modèles mobiles. L'artiste sur place a envoyé les dessins prototypes. Cela ressemble à ceci :

Pour être honnête, j’ai vraiment envie de me plaindre de l’esthétique de nos artistes, mais ce n’est pas le sujet.

Comme la bordure nécessite un motif spécial, je prévois d'utiliser border-image pour l'implémenter.

  .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;
    ……
  }

J'ai finalement constaté que l'affichage Android était normal. Les bordures IOS ne sont pas affichées.

La solution est la suivante :
Remplacez border:6px solid transparent par des propriétés distinctes, à savoir : border-style et 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;
    ……
  }

J'espère que cela aidera tout le monde.

[Recommandations associées]

1. Tutoriel vidéo en ligne h5 gratuit

2. Manuel de la version complète HTML5

.

3. Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!