跨浏览器边框渐变

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 和 :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 包：

    .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 */

请参阅此来源。