IOS页面边框是显示不出来怎么办

发布网友发布时间：2022-05-12 03:04

共2个回答

懂视网时间：2022-05-12 07:26

上周五突然接到现场的一个需求，做一个移动端的劳模展示页面。现场美工把原型图发了过来。这个样子的：

[移动端] IOS下border-image不起作用的解决办法0
说实在的很想吐槽一下我们美工的审美哈，不过这不是重点。

因为边框是需要特殊花纹的所以打算用border-image实现。

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

最终发现安卓显示正常。IOS边框是显示不出来的。

解决办法是：
把 border:6px solid transparent; 替换为单独的属性，即：border-style 和 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;
 ……
 }

希望对大家有帮助。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

热心网友时间：2022-05-12 04:34

因为是仅仅设置了边框是1像素，没有指定颜色和线的类型。只占用了空间而没有显示出来
1、正确的使用该属性的方法是：border:width style color，如border:1px solid red 即指定边框是1像素的红色的实线。
2、正确的代码示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 2px solid #090;
}
</style>
</head>
<body>
<div></div>

</body>
</html>

显示效果如下：