解决新版本Chrome无法显示border-image问题
来源:互联网 发布:linux查看根目录大小 编辑:程序博客网 时间:2024/05/16 10:39
前两天翻墙更新了Chrome,具体版本为51.0.2687.0 dev-m (64-bit)。然后今天在调试代码时发现CSS中的border-image不显示了,去最初学习的网页(CSS3 border-image详解、应用及jQuery插件)查看,发现文章中CSS3 border-image的示例也失效了,从网上搜索border-image,很多文章中的示例同样失效。咋回事呢,难道新版Chrome中将border-image功能删除了?因为笔者曾经使用并且用起来很爽的的style.pixelLeft、style.pixelTop也出现过Chrome起初支持后来删除的情况,所以笔者第一时间想到不会是border-image被W3C废弃所以被Chrome删除了吧,从网上搜索并查询W3C相关标准并未发现该特性被删除,况且此特性非常受欢迎,应该不会被随意废弃。
经过一阵折腾,终于发现原因,之前我的CSS写法如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title></title>
- <style>
- .div1
- {
- position:absolute;
- left:100px;
- top:100px;
- width:400px;
- height:100px;
- padding:1px;
- border:1em;
- -webkit-border-image:url(img/border-image.png) 27 27 27 27 round round;
- }
- </style>
- </head>
- <body>
- <div class="div1">请看我的边框</div>
- </body>
- </html>
效果是这样的:
将border:1em修改为border:1em solid transparent;(还有一点要注意的是border-image要放在border之后)就可以显示了,也可以改为border:1em solid;,就是不只要指定border-width还要指定border-style,,之后的效果如下
0 0
- 解决新版本Chrome无法显示border-image问题
- 解决新版本Chrome无法显示border-image问题
- 解决Chrome中Flash无法显示的问题
- 解决使用新版本 Chrome 后开老版本会出错的问题
- 新版本Chrome浏览器中解决跨域问题
- 问题;border-image的用法???
- 解决微信图片无法显示问题。服务器下载图片,返回Image流
- 解决Discuz7在Chrome中无法显示弹出窗口内容的问题
- 解决Sql Server Reporting Service在Chrome下无法显示Datepicker的问题
- 解决Firefox和Chrome上福州大学教务处下拉菜单无法显示问题
- [chrome - dev]解决版本27插件无法正常显示的问题
- 解决three.js加载外部obj文件在chrome浏览器中无法显示的问题
- 解决Chrome无法播放Songtaste的问题
- 解决新版Chorm border-image无效
- JS设置IMAGE src属性无法显示图片解决
- 解决CHROME中画布中无法显示图片的方法
- 解决eclipse中Android SDK Manager更新慢和部分无法显示System Image镜像问题
- chrome flash无法显示
- 数据探索测试(2)
- ASP.NET Web API 2个步骤启用 Help 说明
- 深入浅出Mybatis系列(一)---Mybatis入门
- TextureView 使用
- Rxbus事件交互
- 解决新版本Chrome无法显示border-image问题
- SVN乱码清理失败
- 每日一linux命令(14)-------head
- Java乱码问题,解决Java乱码
- 用OutputStream的wirte(byte[] b)方法写入文件 改变了文件的大小?
- css3背景属性总结
- SwipeRefreshLayout和ViewPager滑动冲突的原理分析及解决方案
- RSA的java实现
- 通过域名查询IP的4种方法