84669 person learning
152542 person learning
20005 person learning
5487 person learning
7821 person learning
359900 person learning
3350 person learning
180660 person learning
48569 person learning
18603 person learning
40936 person learning
1549 person learning
1183 person learning
32909 person learning
我想用linear-gradient来模拟一个背景,这个背景只有一像素宽度,就是一个竖直线。 因为可以不用额外的标签或者受限的伪元素来画边框,对于结构基本无依赖,所以很适合做grid,只需要css来控制就成,太方便了。
但是我发现,chrome 39,sarfari 5.1.7 上无法显示这个竖直边框,firefox 却可以。
代码在jsfiddle上,请看:
http://jsfiddle.net/xmlovecss/fy1awezu/embedded/result/
光阴似箭催人老,日月如移越少年。
这是属性是支持的 属性支持: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/
这是属性是支持的 属性支持:http://caniuse.com/#search=border-image
参见:http://jsfiddle.net/kycool/vdfx8rr4/1/