是否可以只改变文本阴影的颜色？

Question

我有9个不同颜色的按钮(红色、橙色、黄色、绿色、蓝色、紫色、粉红色、非白色和板岩)，我想知道是否可以操纵和更改这些按钮的text-shadow CSS属性的颜色，同时保持其他值相同？

例如，我有两个不同的类；一个用于具有11 my字体大小的按钮，另一个用于14 my字体大小(我的网站的标准)：

.button-11 {
    font-size: 0.8em;
    border-width: 0.09091em;
    border-style: solid;
    padding: 0 0.90909em;
    text-shadow: 0.09091em 0.09091em 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
    -moz-box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
}

.button-14 {
    border-width: 0.07143em;
    border-style: solid;
    padding: 0 0.71429em;
    text-shadow: 0.07143em 0.07143em 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
    -moz-box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
}

对于那些不知道的人，我有两个不同的类，因为每个字体大小对边框和文本阴影都需要不同的值，因为我使用em度量-- 0.09em在字体大小为11 1px时等于1 1px，在字体大小为14 1px时，0.07em等于1 1px。

因此，为了减少CSS文件的大小，如果我可以简单地更改text-shadow CSS属性的颜色，而不必包括其他值，这将非常有帮助。

有人知道这是否可能吗？

谢谢。

Answer 1

是的，这可以使用CSS变量! 实现

正如其他人指出的那样，官方的text-shadow-color属性并不存在。但是，CSS将允许您创建自己的“自定义属性”-aka CSS变量，并在按钮的CSS中使用它。

让我们创建一个名为--my-shadow-color的变量。任何名称都可以，但它必须以--开头。

创建CSS变量

若要使其全局可用，以便您可以将其用作默认值，请将其放在特殊的:root选择器中：

:root {
  --my-shadow-color: gray;
}

button {
  text-shadow: 1px 1px var(--my-shadow-color);
}

默认情况下，阴影将是灰色的。但是您可以为每个不同的按钮类重写它。请注意，您可以在任何选择器中定义(或重新定义) CSS变量--:root只是最通用的。与常规CSS属性一样，更具体的选择器将超过较不特定的选择器。

重写不同选择器的变量

现在可以重写任何特定选择器的颜色。让我们创建.button-red和.button-blue类来设置不同按钮的文本阴影颜色。

.button-blue {
  --my-shadow-color: blue;
}
.button-red {
  --my-shadow-color: red;
}

现在我们可以通过在HTML中使用.button-blue和.button-red类来控制阴影颜色：

<button class="button-blue">Blue</button>
<!-- ^ shadow will be blue -->

<button class="button-red">Red</button>
<!-- ^ shadow will be red -->

<button>Default</button>
<!-- ^ shadow will be gray -->

Answer 2

不幸的是，不是:似乎(按照规格)没有box-shadow-color属性。

上面的内容完好无损，尽管它处理的是错误的属性；为了解决这个问题，尽管text-shadow属性似乎也是如此，text-shadow-color也同样不受支持(和在规范中不存在)。

Answer 3

如果您的文本阴影颜色与文本颜色相同，则可以这样做：

.button-red {
    color: #ff0000;
}    
.button-11 {
    font-size: 0.8em;
    border-width: 0.09091em;
    border-style: solid;
    padding: 0 0.90909em;
    text-shadow: 0.09091em 0.09091em 0 rgba(currentcolor, 0.5);
    -webkit-box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
    -moz-box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 -0.09091em rgba(255, 255, 255, 0.3) inset;
}
.button-14 {
    border-width: 0.07143em;
    border-style: solid;
    padding: 0 0.71429em;
    text-shadow: 0.07143em 0.07143em 0 rgba(currentcolor, 0.5);
    -webkit-box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
    -moz-box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 -0.07143em rgba(255, 255, 255, 0.3) inset;
}

然后按下按钮

<button class="button-red button-11">…</button>