CSS3 Les gradients bordures

Question

J’essaie d’appliquer un dégradé à une bordure, j’ai pensé que c’était aussi simple que cela :

Cela ne fonctionne pas, personne sait ce qui est la façon correcte d’à la frontière des gradients.

Answer 1

WebKit maintenant (et Chrome 12 au moins) prend en charge les dégradés comme image de frontière :

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

Answer 2

au lieu de frontières, j’utiliserais le rembourrage et les dégradés de fond. même look, mais beaucoup plus facile, plus pris en charge.

un exemple simple :

CSS :

Answer 3

<blockquote> <p>Mozilla supporte actuellement seulement dégradés CSS sous forme de valeurs de la propriété background-image, ainsi que dans le fond de la sténographie.</p> <p>- <a href="https://developer.mozilla.org/en/CSS/-moz-linear-gradient">https://developer.mozilla.org/en/CSS/-moz-linear-gradient</a></p><pre><code></code></pre><p>- <a href="http://www.cssportal.com/css3-preview/borders.htm">http://www.cssportal.com/css3-preview/borders.htm</a></p></blockquote>

Answer 4

Essayez ceci, fonctionne très bien sur le web-kit

http://jsfiddle.net/284sa/

Answer 5

C’est un hack, mais vous pouvez obtenir cet effet dans certains cas en utilisant l’image d’arrière-plan pour spécifier le gradient et puis masquer l’arrière-plan réel avec une boîte-ombre. Par exemple :

À partir de : http://blog.nateps.com/the-elusive-css-border-gradient