【问题标题】:Cross browser border gradient跨浏览器边框渐变
【发布时间】:2011-09-25 10:08:28
【问题描述】:

我想获得边框渐变(从顶部:#0c93c0;到底部:白色)。我想知道,有没有办法让 webkit 和 moz 浏览器都使用 css3?

【问题讨论】:

标签: css cross-browser


【解决方案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; }

【讨论】:

  • @RobW 我认为它被否决了,因为缺乏优雅(添加额外的标记并不优雅)。
【解决方案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); }

【讨论】:

  • 非常适合使用 Less!可悲的是,这个问题并没有要求,所以不能投票。另外,添加最后两行(&amp;:before [...]&amp;:after [...])时出现错误。
  • 错误是:没有为.border-bundle(, , , )找到匹配的定义
【解决方案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

【讨论】:

  • 那是什么?我想得到border 渐变。我的意思是边框:1px,实心...不是background
  • Mozilla 还不支持边框渐变。我正在展示一种跨浏览器的方式来显示background-gradients。当 Mozilla 添加对边框渐变的支持时,您可以使用我的答案作为跨浏览器支持的基础。
猜你喜欢
  • 2013-11-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-24
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多