Question

我有9个不同颜色的按钮（红色，橙色，黄色，绿色，蓝色，紫色，粉红色，灰白色和板岩色），我想知道是否可以操纵和改变{{1这些按钮的CSS属性，同时保持其他值相同？

例如，我有两个不同的类;一个用于11px字体大小的按钮，另一个用于14px字体大小（我网站上的标准）：

text-shadow

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

因此，为了减少CSS文件的大小，如果我只需更改.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; } CSS属性的颜色而不必包含其他值就会有很大帮助。

有人知道这是否可行？

谢谢。

Answer 1

不幸的是，没有：似乎（according to the specification）没有box-shadow-color属性。

上面保留完整，虽然它解决了错误的属性;解决问题，虽然似乎text-shadow属性也是如此，text-shadow-color同样不受支持（和non-existent in the specification）。

Answer 2

如果您的文字阴影颜色与文字颜色相同，则可以执行此操作：

.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>

Answer 3

是的，是否可以更改文字阴影的颜色，请参阅以下链接。

http://www.w3.org/Style/Examples/007/text-shadow.en.html

http://css3gen.com/text-shadow/

Answer 4

可以设置文字阴影和Box阴影

文字阴影示例

h1
{
    text-shadow:2px 2px #FF0000;
}

框阴影示例

div
{
box-shadow: 10px 10px 5px #ff0000; /* Red Color Shadow */
}

这是你期待的Check here。您可以控制阴影下降距离。

是否可以仅更改文字阴影的颜色？

4 个答案: