Question

我想在这个网站上创建一个内阴影：

http://css-tricks.com/snippets/css/css-box-shadow/

但我希望右侧和底侧的阴影呈白色。我真的没有更多的想法。

总是当我点击我的按钮时，我只会得到白色阴影。那么白色阴影会覆盖黑色？

多远我：

＆＃13;

$('#button').mouseup(function () {
    $('#button').removeClass('shadowBlack shadowWhite')
});

$('#button').mousedown(function() {
    $('#button').addClass('shadowBlack shadowWhite')
});

＆＃13;

.shadowBlack {
    -webkit-box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
    -moz-box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
    box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
}

.shadowWhite {
    -webkit-box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
    -moz-box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
    box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
}

＆＃13;

Answer 1

找到它：

.shadow { -webkit-box-shadow：inset 9px 9px 15px 0px rgba（0,0,0,0.75）.inset -10px -10px 15px 0px rgba（255,255,255,1）; -moz-box-shadow：插入9px 9px 15px 0px rgba（0,0,0,0.75），插入-10px -10px 15px 0px rgba（255,255,255,1）; box-shadow：inset 9px 9px 15px 0px rgba（0,0,0,0.75），inset -10px -10px 15px 0px rgba（255,255,255,1）; }

$('#button').mouseup(function () {
    $('#button').removeClass('shadowBlack shadowWhite')
});

$('#button').mousedown(function() {
    $('#button').addClass('shadowBlack shadowWhite')
});

.shadowBlack {
    -webkit-box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
    -moz-box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
    box-shadow: inset 200px 200px 0px -186px rgba(0,0,0,1);
}

.shadowWhite {
    -webkit-box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
    -moz-box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
    box-shadow: inset -200px -200px 0px -186px rgba(255,255,255,1);
}

在黑白的按钮内在阴影

1 个答案: