按钮内部阴影为黑色和白色

Question

我想在这个网站上创建一个类似内部阴影的：

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

但是我想把右边和下边的阴影都染成白色。我真的没有更多的想法了。

当我点击按钮时，我总是只看到白色的阴影。所以白色阴影覆盖了黑色？

这就是我现在的处境：

$('#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);
}

Answer 1

发现了：

.阴影{-webkit盒子阴影：插入9px 9px 15px 0px rgba（0,0,0.75）。插入-10px-10px 15px 0px rgba（255255,1）；-moz框阴影：插入9px 9px 15px 0px rgba（0,0,0.75），插入-10px-10px 15px 0px rgba（255255,1）；框阴影：插入9px 9px 15px 0px rgba（0,0,0.75），插入-10px-10px 15px 0px rgba（255255,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);
}