Если вы хотите полностью контролировать границу и градиент, вы можете использовать мой плагин iQuery Background Canvas. Он работает с элементом HTML5 Canvas и позволяет рисовать границы и фоны в любом варианте. Но вы должны уметь программировать JavaScript
Это полнофункциональный образец с градиентом фона и закругленными углами. Как вы можете видеть, рисование полностью сделано в JavaScript, вы можете установить любой параметр, который вы хотите.
Чертеж переделывается при каждом изменении размера (из-за события изменения размера), вы можете адаптировать фоновый рисунок, чтобы показать, сколько вы хотите для этого конкретного размера.
$(document).ready(function(){
$(".Test").backgroundCanvas();
});
function DrawBackground() {
$(".Test").backgroundCanvasPaint(TestBackgroundPaintFkt);
}
// Draw the background on load and resize
$(window).load(function () { DrawBackground(); });
$(window).resize(function() { DrawBackground(); });
function TestBackgroundPaintFkt(context, width, height, elementInfo){
var options = {x:0, height: height, width: width, radius:14, border: 0 };
// Draw the red border rectangle
context.fillStyle = "#FF0000";
$.canvasPaint.roundedRect(context,options);
// Draw the gradient filled inner rectangle
var backgroundGradient = context.createLinearGradient(0, 0, 0, height - 10);
backgroundGradient.addColorStop(0 ,'#AAAAFF');
backgroundGradient.addColorStop(1, '#AAFFAA');
options.border = 5;
context.fillStyle = backgroundGradient;
$.canvasPaint.roundedRect(context,options);
}
Вот плагин, и этот сайт широко использует его:
Плагин jQuery Background Canvas