按照老师的代码，可是在谷歌浏览器上就是显示不出来

按照老师的代码，可是在谷歌浏览器上就是显示不出来，我把老师源代码的那个html文档用谷歌浏览器也没有显示出来，求指教

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>border-image</title>
 <style type="text/css">
  div{
   width: 853px;
   height: 392px;
   border-image: url("border.jpg");
   border-image-slice: 50%;
   border-image-width: 50%;
   border-image-outset: 2;
  }
    
   
 </style>
</head>
<body>
 <div></div>
</body>
</html>

阿狸的桃子942 2017-05-20

源自：CSS3边框与圆角 1-11 边界图片

55

收起

3回答

樱桃小胖子回答被采纳获得+3积分 2017-07-26 17:05:41

需要设置先导的border才可以，譬如border: 15px solid transparent;其中 transparent表示边框透明，希望可以帮到你！

阿狸的桃子942 提问者 #1

谢谢啦

2017-07-27 10:18:26
阿狸的桃子942 提问者 #2

我想问一下为什么要加border:15px solid;呀？

2017-07-27 10:19:36
樱桃小胖子回复提问者阿狸的桃子942 #3

首先需要有border，后面的border-image才可以生效，设置数值是因为边框需要有宽度、线条类型、颜色三个属性值缺一不可。而数值15px可以自定义设置大小，祝学习愉快！

2017-07-27 11:01:30

点开查看后面3条评论

Dzxwind 2017-07-22 09:41:20

我之前也显示不出来，后来我加了个border:solid;就可以了。。

提问者阿狸的桃子942 #1

我加了，还是不行，是直接显示的是一个黑色边框，并没有图案

2017-07-26 10:43:08

小丸子爱吃菜 2017-05-20 16:05:05

老师的代码我这边打开是可以的，你看下是否是图片的路径写错误了。

祝学习愉快！

相似问题

请问为什么二维码的图片（code.png）只能在谷歌浏览器中显示出来，换别的浏览器都只显示一块白呢？

为什么谷歌浏览器得写法和标准写法效果不一样，我用的谷歌浏览器

关于谷歌浏览器无法打开网页。

老师使用edge浏览器和使用谷歌浏览器有什么区别吗会有什么影响？

谷歌浏览器不显示字体图标，其他浏览器可以显示（代码

登录后可查看更多问答，登录/注册

HTML5与CSS3实现动态网页 2018

参与学习 1887 人
提交作业 4643 份
解答问题 5760 个

有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。

本课精华内容

问答作业

请忽略此问答

26 33

公式书写。。

31 19

3-8编程练习哪有问题

47 17

全局变量与函数内的全局变量

119 15

编程练习4-4的问题

111 15

查看更多本课问答

请稍等 ...

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号