CSS3渐变边框
我正在尝试将渐变应用于边框，我认为这很简单：
border-color: -moz-linear-gradient(top, #555555, #111111);
这不起作用，有谁知道边界渐变的正确方法是什么。
现在WebKit（至少Chrome 12）支持渐变作为边框图像：
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
Prooflink - http://www.webkit.org/blog/1424/css3-gradients/
浏览器支持：http：//caniuse.com/#search=border-image
而不是边界，我会使用背景渐变和填充。 相同的外观，但更容易，更支持。
一个简单的例子：
<div class="g">
<div>bla</div>
</div>
CSS：
.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}
.g > div { background: #fff; }
的jsfiddle
编辑：你也可以利用:before选择器:before @WalterSchwarz在这个jsFiddle中指出
Mozilla目前仅支持CSS渐变作为background-image属性的值，以及简写背景中的值。
- https://developer.mozilla.org/en/CSS/-moz-linear-gradient
Example 3 - Gradient Borders
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
- http://www.cssportal.com/css3-preview/borders.htm
链接地址: http://www.djcxy.com/p/89417.html