前端 - chrome 不支持 linear-gradient描绘border背景

【字号: 日期:2022-06-17浏览:36作者:雯心

问题描述

我想用linear-gradient来模拟一个背景,这个背景只有一像素宽度,就是一个竖直线。因为可以不用额外的标签或者受限的伪元素来画边框,对于结构基本无依赖,所以很适合做grid,只需要css来控制就成,太方便了。

但是我发现,chrome 39,sarfari 5.1.7 上无法显示这个竖直边框,firefox 却可以。

代码在jsfiddle上,请看:

http://jsfiddle.net/xmlovecss/fy1awezu/embedded/result/

问题解答

回答1:

这是属性是支持的 属性支持:http://caniuse.com/#search=border-image

width: 200px;margin: 0 auto;height: 200px;border-width: 3px;border-style: solid;-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 14, 0))) 1 100%;-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 14, 0)) 1 100%;-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 14, 0)) 1 100%; -o-border-image: -o-linear-gradient(black, rgba(0, 0, 14, 0)) 1 100%;border-image: linear-gradient(to bottom, black, rgba(0, 0, 14, 0)) 1 100%;

参见:http://jsfiddle.net/kycool/vdfx8rr4/1/

相关文章: