html - CSS 框阴影 - 悬停类

Question

我正在尝试构建一个通用的悬停类，它使用 box-shadow amd 来处理多种颜色的按钮。出于这个原因，我希望按钮的每种颜色的“阴影”都不同。我想知道是否有办法只使用或设置阴影元素的颜色属性？

我的意思是:

/*Notice that .button shadows does not have a color value*/

.button {
    -webkit-box-shadow: 
    0px 8px 16px 0px;
    box-shadow:
    0px 8px 16px 0px;
}

.button:hover{
    -webkit-box-shadow: 
    0px 16px 16px 0px;
    box-shadow:
    0px 16px 16px 0px;
}

/*And color elements does not have other values for the shadow*/

.red{
    -webkit-box-shadow: 
    rgba(255, 0, 0, 0.1);
    box-shadow:
    rgba(255, 0, 0, 0.1);
}
.green{
    -webkit-box-shadow: 
    rgba(0, 255, 0, 0.1);
    box-shadow:
    rgba(0, 255, 0, 0.1);
}

...按如下方式使用:

<div class="button red>Red Button</div>
<div class="button green>Green Button</div>

我希望这能解释情况。头脑 Storm 时间!

Answer 1

你需要添加color: red

.red{
    color:red
}
.green{
   color:green
}

由于 color: 属性也适用于文本，您需要使用 span 标签将文本包裹起来，并将 color:black 赋给 跨度。

DEMO