var size = 40;
function aToB(gradient) {
return $("<div>").css({
width: size,
height: size,
background: gradient,
position: "absolute"
});
}
function radialOut(x, y, corner) {
var css = {};
css["border-" + corner + "-radius"] = size/2;
return aToB([
"radial-gradient(",
size,
"px at ",
x,
"px ",
y,
"px, red, blue)"].join("")).css(css);
}
function radialIn(x, y, corner) {
var css = {};
css["border-" + corner + "-radius"] = size/2;
return aToB([
"radial-gradient(",
size,
"px at ",
x,
"px ",
y,
"px, blue, red)"].join("")).css(css);
}
function downToUp() {
return aToB("linear-gradient(to left, red, blue)");
}
function rightToLeft() {
return aToB("linear-gradient(to bottom, red, blue)");
}
function upToDown() {
return aToB("linear-gradient(to right, red, blue)");
}
function leftToRight() {
return aToB("linear-gradient(to top, red, blue)");
}
function upToRight() {
return radialIn(size, 0, "bottom-left");
}
function leftToUp() {
return radialIn(0, 0, "bottom-right");
}
function downToLeft() {
return radialIn(0, size, "top-right");
}
function rightToDown() {
return radialIn(size, size, "top-left");
}
function rightToUp() {
return radialOut(size, 0, "bottom-left");
}
function upToLeft() {
return radialOut(0, 0, "bottom-right");
}
function leftToDown() {
return radialOut(0, size, "top-right");
}
function downToRight() {
return radialOut(size, size, "top-left");
}
$(function() {
//inner
$("body").append(upToDown().css({
top: size,
left: 0
})).append(upToRight().css({
top: size * 2,
left: 0
})).append(leftToRight().css({
top: size * 2,
left: size
})).append(leftToUp().css({
top: size * 2,
left: size * 2
})).append(downToUp().css({
top: size,
left: size * 2
})).append(downToLeft().css({
top: 0,
left: size * 2
})).append(rightToLeft().css({
top: 0,
left: size
})).append(rightToDown().css({
top: 0,
left: 0
}));
//outer
$("body").append(leftToDown().css({
top: 0,
left: size * 5
})).append(upToDown().css({
top: size,
left: size * 5
})).append(upToLeft().css({
top: size * 2,
left: size * 5
})).append(rightToLeft().css({
top: size * 2,
left: size * 4
})).append(rightToUp().css({
top: size * 2,
left: size * 3
})).append(downToUp().css({
top: size * 1,
left: size * 3
})).append(downToRight().css({
top: 0,
left: size * 3
})).append(leftToRight().css({
top: 0,
left: size * 4
}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
在哪个方向是梯度,垂直或平行于你的蛇的纵向轴线?一个图像会有所帮助。也许一个简单的'径向渐变'可以解决你的问题。 – Bergi 2014-12-03 16:26:42
你可以提供一个你的意思是 – chiliNUT 2014-12-03 17:42:06
你使用画布或其他元素的图片吗? – 2014-12-03 18:03:49