老师我按照视频做没有边框显示了，这是怎么回事

1、把border的设置删除就没有边框2、不删除border设置跟视频显示效果不对

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Border Image</title>

<style type="text/css">

div {

width: 853px;

height: 392px;

border:50px solid;

border-image:url("border.jpg") 50% 50% 2;

}

</style>

</head>

<body>

<div></div>

</body>

</html>

慕前端4396110 2019-04-24

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

3

收起

3回答

wangdaw92 2019-04-25 23:06:37

试试，-webkit- -moz- -ms- -o- 这几个兼容都写上安

好帮手慕慕子 2019-04-24 17:48:02

同学你好， border-image-slice指边框图像顶部、左侧、顶部、右侧的内偏移量；直接设置数值50表示图片的像素。

border-image-width：是图片边框的宽度，设置数字50表示倍数。

这些在教辅资料中也都有详细的讲解。另，这个属性目前兼容性不好，实际应用场景中很少使用到，同学参考教辅资料了解一下就可以了，例：

如果帮助到了你，欢迎采纳

祝学习愉快~~~

好帮手慕慕子 2019-04-24 17:25:42

同学你好，这些主要还是因为浏览器对这个新的属性兼容性不好导致的

1、删除border的设置，添加前缀，不使用百分比在谷歌浏览器打开可以出现效果

2、视频中老师是分开写的，建议同学可以尝试分开写这些属性

如果帮助到了你，欢迎采纳

祝学习愉快~~~

提问者慕前端4396110 #1

!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Border Image</title> <style type="text/css"> div { width: 853px; height: 392px; -webkit-border-image-source:url("border.jpg"); -webkit-border-image-slice:50%; -webkit-border-image-width:50%; } </style> </head> <body> <div></div> </body> </html> 还是没有

2019-04-24 17:32:10
提问者慕前端4396110 #2

老师按照你的方法也没用，没有border设置边框宽度就什么都没有

2019-04-24 17:34:12
提问者慕前端4396110 #3

有了边框了老师，但是不是视频显示那样的设置50 50 就是50% 的意思还是50px？

2019-04-24 17:39:35

相似问题

老师这个不是应该设置左边框才显示在中间吗？怎么是设置第二颗牙齿的右边框才显示在中间？

这一节，不是有边框了吗？

查看返回值的方式

内边框线条的宽度怎么设置啊？

如何在浏览器中显示文字或者声音视频？

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

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载