黑白按钮内阴影答案

【问题标题】：Button Inner Shadow in black and white黑白按钮内阴影
【发布时间】：2015-02-10 19:40:27
【问题描述】：

我想在这个网站上创建一个 Inner-Shadow：

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);
}

【问题讨论】：

您的 jfiddle 中缺少 HTML，因此它不起作用。

标签： button shadow

【解决方案1】：

发现了：

.阴影{ -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: inset 9px 9px 15px 0px rgba(0,0,0,0.75), inset -10px -10px 15px 0px rgba(255,255,255,1); 盒子阴影：插入9px 9px 15px 0px rgba（0,0,0,0.75），插入-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);
}

【讨论】：