底部渐变边框 [英] Bottom Gradient Border

问题描述

根据 CSS技巧，以下CSS语法会导致左边框渐变。

  .left到右边{
 border-width：3px 0 3px 3px; 
 -webkit-border-image：
 -webkit-gradient（线性，100％0,0 0，从（黑色）到（rgba（0,0,0,0））） ％; 
 -webkit-border-image：
 -webkit-linear-gradient（right，black，rgba（0，0，0，0））1 100％; 
 -o-border-image：
 -o-linear-gradient（right，black，rgba（0，0，0，0））1 100％; 
 -moz-border-image：
 -moz-linear-gradient（right，black，rgba（0，0，0，0））1 100％; 
} 
  

我想在元素底部得到边框渐变。

我尝试更改此项

  border-width：3px 0 3px 3px; 
  

到此

  border-width：0 0 3px 0; 
  

此

  border-width：0 3px 3px 3px; 
  

它不工作，任何人都可以帮助我获得底边框工作？ p>

您可能需要使用WebKit浏览器才能执行此操作。

一个工作; http://jsfiddle.net/HsTcf/

感谢。

解决方案

  border-width：0 0 3px 0; 
  

是正确的。

以下变更需要进行：

  ...-gradient（right，... 
  

需要更改为

  ... -gradient（top，... 
  

; 到 100％1; 。

演示： jsfiddle.net/HsTcf/3

According to CSS Tricks, the following CSS syntax would result in left border gradient.

.left-to-right {
border-width:3px 0 3px 3px;
-webkit-border-image: 
    -webkit-gradient(linear, 100% 0, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: 
    -webkit-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
         -o-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:
       -moz-linear-gradient(right, black, rgba(0, 0, 0, 0)) 1 100%;   
}

I'm trying to get the border gradient on the bottom of the element.

I tried changing this

    border-width:3px 0 3px 3px;

to this

border-width:0 0 3px 0;

this

border-width:0 3px 3px 3px;

And it doesn't work, can anybody help me with getting that bottom border to work?

You may need a WebKit browser to do this.

Here would be a fiddle for one to work with; http://jsfiddle.net/HsTcf/

Thanks.

解决方案

border-width: 0 0 3px 0;

is correct.

However, the following changed needed to be made:

... -gradient(right, ...

needed to be changed to

... -gradient(top, ...

and 1 100%; to 100% 1;.

Demo: jsfiddle.net/HsTcf/3

这篇关于底部渐变边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！