跨瀏覽器邊框漸變

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); 
    }