What should I do if the IOS page border cannot be displayed? border-image example tutorial

Last Friday, I suddenly received a request from the site to create a mobile model worker display page. The on-site artist sent the prototype drawings. It looks like this:

#To be honest, I really want to complain about our artist’s aesthetics, but that’s not the point.

Because the border requires a special pattern, I plan to use border-image to implement it.

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

Finally found that the Android display was normal. IOS borders are not displayed.

The solution is:
Replace border:6px solid transparent; with separate attributes, namely: border-style and 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;
    ……
  }

Hope it helps everyone.

【Related recommendations】

1. Free h5 online video tutorial

2. HTML5 full version manual

3. php.cn original html5 video tutorial

The above is the detailed content of What should I do if the IOS page border cannot be displayed? border-image example tutorial. For more information, please follow other related articles on the PHP Chinese website!