Home  >  Article  >  Web Front-end  >  What should I do if the IOS page border cannot be displayed? border-image example tutorial

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

零下一度
零下一度Original
2017-05-12 12:02:502487browse

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:

[移动端] IOS下border-image不起作用的解决办法0
#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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn