跨浏览器边框渐变

Question

我想获得边框渐变（从顶端：＃0c93c0;到底部：白色）。我想知道，有没有什么办法让css3为webkit和moz浏览器？ THX提前

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

小提琴：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。

Answer 3

使用less.css（当然你可以不用还），关键是在pseudoselectors（：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(@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); 
    }