Is it possible to change only the color of text sh

问题:

I have 9 differently colored buttons (red, orange, yellow, green, blue, purple, pink, off-white and slate) and I was wondering if it was possible to manipulate and alter only the color of the text-shadow CSS property for these buttons, while keeping the other values the same?

For example, I have two different classes; one is for buttons with 11px font size and the other is for 14px font size (standard across my website):

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

For those unaware, I have two separate classes because each font size requires different values for the borders and text shadow, since I'm using the em measurement - 0.09em equates to 1px at font size 11px, and 0.07em equates to 1px at font size 14px.

So, in order to cut down on the CSS file size, it would help greatly if I could simply change the color of the text-shadow CSS properties without having to include the other values.

Does anyone know if this is possible?

Thank you.

回答1:

Unfortunately, no: it seems (according to the specification) that there is no box-shadow-color property.

The above left intact, though it was addressing the wrong properties; to address the question, though it seems that the same point is true of the text-shadow property, with the text-shadow-color similarly unsupported (and non-existent in the specification).

回答2:

If your text-shadow color is the same as the text color you could do this:

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

And then on the button

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

回答3:

Yes, Is it possible to change the color of text shadow, see the below links.

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

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

回答4:

Text shadow and Box shadow both can be set

Text Shadow Example

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

Box Shadow Example

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

Is this what are you expecting Check here. You can control the shadow fall distance.