解决新版本Chrome无法显示border-image问题
2016-03-30 16:59
579 查看
前两天翻墙更新了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写法如下:
效果是这样的:
将border:1em修改为border:1em solid transparent;(还有一点要注意的是border-image要放在border之后)就可以显示了,也可以改为border:1em solid;,就是不只要指定border-width还要指定border-style,,之后的效果如下
经过一阵折腾,终于发现原因,之前我的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,,之后的效果如下
相关文章推荐
- 配Hessian
- c# 为什么结构中不能有实例字段初始设定值项
- Ajax工作原理
- review过去的10年
- android加载网络图片时有效避免OOM
- sstable
- 【2016.3.30项目技术记录】]VS2010自动生成MFC单文档框架程序的修改:去除属性框,在CViewTree类中添加鼠标单击响应
- 使用URLConnection与HttpClient进行接口对接
- python文件的读写
- Eclipse in Ubuntu16.04LTS Final Beta
- 34、疯狂java讲义第三版
- MySQL数据类型之有NCHAR与NVARCHAR数据类型吗?
- 为IE8添加EventListener系列方法支持
- STL 初学
- 卢卡斯莱默检验法检验梅森素数
- Eclipse 常用插件在线安装地址
- Matlab绘图-很详细,很全面
- 检测是否是微信浏览器
- zipline
- 在线旅游产品目前有哪些急需解决的痛点?