开发者社区> 问答> 正文

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

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

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

代码在jsfiddle上,请看:

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

展开
收起
a123456678 2016-03-26 15:31:32 2165 0
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%;
    2019-07-17 19:16:20
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载