CSS3渐变边框

问题描述

我想对边框应用渐变，我认为这样做很简单：

I'm trying to apply a gradient to a border, I thought it was as simple as doing this:

border-color: -moz-linear-gradient(top, #555555, #111111);

这不行，是否有人知道边框渐变的正确方法是什么。

This does not work, does anyone know what the correct way to do border gradients is.

推荐答案

WebKit现在（至少Chrome 12）支持渐变作为边框图像：

WebKit now (and Chrome 12 at least) supports gradients as border image:

-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 -

浏览器支持：

Prooflink -- http://www.webkit.org/blog/1424/css3-gradients/
Browser support: http://caniuse.com/#search=border-image

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