HTML5: прямоугольник, противонаправленные градиенты для заливки и границы

Question

Можно ли создать прямоугольник с градиентной заливкой от черного верха к белому низу с градиентной границей от белого верха к черному дну?

С уважением,

Answer 1

Гипотетически возможно также использование градиентов CSS для фонового изображения и изображения границы. Я до сих пор не могу понять правильный синтаксис изображения границы, но вот полуразумленная скрипка с градиентом для изображения границы: http://jsfiddle.net/y8uFu/

Вы можете просмотреть спецификацию для border-image здесь: http://www.w3.org/TR/css3-background/#border-images

Я бы хотел посмотреть, сможет ли кто-нибудь понять это для изображения границы.

Answer 2

Да, это вполне возможно. «Холст» - это то, что вы ищете.

Вот несколько ресурсов, с которых можно начать:

• http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-introducing-canvas/
• http://diveintohtml5.ep.io/canvas.html#divingin
• http://www.html5canvastutorials.com/tutorials/html5-canvas-linear-gradients/
• http://dev.opera.com/articles/view/html-5-canvas-the-basics/#gradients