Question

我想获得边框渐变（从顶部开始：＃0c93c0;到底部：白色）。我想知道，对于webkit和moz浏览器，有什么方法可以用css3来获取它吗？

Answer 1

而不是边框，我会使用背景渐变和填充。相同的外观，但更容易，更支持。

一个简单的例子：

<div class="g">
    <div>bla</div>
</div>

CSS：

.g {
  background-image: -webkit-linear-gradient(top, #0c93C0, #FFF); 
  background-image:    -moz-linear-gradient(top, #0c93C0, #FFF); 
  background-image:     -ms-linear-gradient(top, #0c93C0, #FFF); 
  background-image:      -o-linear-gradient(top, #0c93C0, #FFF); 
  background-image:         linear-gradient(top, #0c93C0, #FFF);
  padding: 1px;
}

.g > div { background: #fff; }

Answer 2

使用less.css（当然你也可以不用），诀窍是伪选择器（：before and：after）：

1。定义跨浏览器渐变：


    .linear-gradient (@dir, @colorFrom, @colorTo) {
        background: -webkit-linear-gradient(@dir, @colorFrom, @colorTo);
        background: -moz-linear-gradient(@dir, @colorFrom, @colorTo);
        background: -ms-linear-gradient(@dir, @colorFrom, @colorTo);
        background: -o-linear-gradient(@dir, @colorFrom, @colorTo);
    }

2。定义border-gradient bundle：


    .border-gradient(@colorFrom, @colorTo){
        border-top:1px solid @colorFrom;
        border-bottom:1px solid @colorTo;
        position:relative;

        .border-bundle(@colorFrom, @colorTo){
            position:absolute;
            content:"";
            width:1px;
            height:100%;
            top:0;
            .linear-gradient(top, @colorFrom, @colorTo);
        }

        &:before{ .border-bundle(@colorFrom, @colorTo); left: 0; }
        &:after { .border-bundle(@colorFrom, @colorTo); right:0; }  
    }

我们现在可以像这样使用它：


    .some-class{

        /* other properties */

        .border-gradient(#0c93c0, #FFF);
    }

Answer 3

小提琴：http://jsfiddle.net/9ZDTA/
使用特定前缀为要支持的每个浏览器引擎添加额外声明。

  background-color: #0c93C0; /* fallback color if gradients are not supported */

  background-image: -webkit-linear-gradient(top, #0c93C0, #FFF); 
  background-image:    -moz-linear-gradient(top, #0c93C0, #FFF); 
  background-image:     -ms-linear-gradient(top, #0c93C0, #FFF); 
  background-image:      -o-linear-gradient(top, #0c93C0, #FFF); 
  background-image:         linear-gradient(top, #0c93C0, #FFF); /* standard, but currently unimplemented */

请参阅this source。

跨浏览器边框渐变

3 个答案: