11

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

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

.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 相当于 1px 字体大小 11px，0.07em 相当于 1px 字体大小 14 像素。

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

有谁知道这是否可能？

谢谢你。

4

4 回答 4

9

不幸的是，没有：似乎（根据规范）没有box-shadow-color属性。

上面的内容保持不变，尽管它处理了错误的属性；为了解决这个问题text-shadow，尽管该属性似乎也是如此，但text-shadow-color同样不受支持（并且在规范中不存在）。

于 2013-10-17T07:29:38.757 回答
0

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

.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">…&lt;/button>
于 2017-10-16T14:28:46.383 回答
-1

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

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

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

于 2013-10-17T07:41:58.380 回答
-2

文字阴影和框阴影都可以设置

文本阴影示例

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

盒子阴影示例

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

这是您所期待的吗？请在此处查看。您可以控制阴影下落距离。

于 2013-10-17T07:46:14.467 回答