Home > Article > Web Front-end > 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
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!