我想用linear-gradient来模拟一个背景,这个背景只有一像素宽度,就是一个竖直线。
因为可以不用额外的标签或者受限的伪元素来画边框,对于结构基本无依赖,所以很适合做grid,只需要css来控制就成,太方便了。
但是我发现,chrome 39,sarfari 5.1.7 上无法显示这个竖直边框,firefox 却可以。
代码在jsfiddle上,请看:
这是属性是支持的 属性支持: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%;
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。