跨浏览器边框渐变

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) { 背景：-webkit-linear-gradient(@dir, @colorFrom, @colorTo); 背景：-moz-linear-gradient(@dir, @colorFrom, @colorTo); 背景：-ms-线性渐变（@dir，@colorFrom，@colorTo）； 背景：-o-linear-gradient（@dir，@colorFrom，@colorTo）； }

2。定义边界渐变包：

.border-gradient(@colorFrom, @colorTo){ 边框顶部：1px 纯色@colorFrom； 边框底部：1px 纯色@colorTo； 位置：相对； .border-bundle(@colorFrom, @colorTo){ 位置：绝对； 内容：””; 宽度：1px； 高度：100%； 顶部：0； .线性渐变（顶部，@colorFrom，@colorTo）； } &:before{ .border-bundle(@colorFrom, @colorTo);左：0； } &:after { .border-bundle(@colorFrom, @colorTo);对：0； } }

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

.some-class{ /* 其他属性 */ .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。