前端 - chrome 不支持 linear-gradient描绘border背景-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

大家讲道理 2017-04-17 11:08:38

[CSS3讨论组]

1018

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

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

代码在jsfiddle上，请看：

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

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(1)

黄舟2017-04-17 11:10:38 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/