Gibt es eine 'Box-Shadow-Color'-Eigenschaft?

Ich habe folgendes CSS:

box-shadow: inset 0px 0px 2px #a00;

Jetzt versuche ich, diese Farbe zu extrahieren, um die Seitenfarben "skinnbar" zu machen. Gibt es eine Möglichkeit, dies zu tun? Durch einfaches Entfernen der Farbe und anschließendes erneutes Verwenden desselben Schlüssels wird die ursprüngliche Regel überschrieben.

Es scheint keine zu geben box-shadow-color, zumindest taucht Google nichts auf.

Nein:

http://www.w3.org/TR/css3-background/#the-box-shadow

Sie können dies in Chrome und Firefox überprüfen, indem Sie die Liste der berechneten Stile überprüfen. Bei anderen Eigenschaften mit Kurzmethoden (wie border-radius) sind die Variationen in der Spezifikation definiert.

Wie bei den meisten fehlenden "Long-Hand" -CSS-Eigenschaften können CSS-Variablen dieses Problem lösen:

#el {
    --box-shadow-color: palegoldenrod;
    box-shadow: 1px 2px 3px var(--box-shadow-color);
}

#el:hover {
    --box-shadow-color: goldenrod;
}

Eigentlich ... gibt es! Art von. box-shadowDer Standardwert colorist genau wie border.

Laut http://dev.w3.org/.../#the-box-shadow

Die Farbe ist die Farbe des Schattens. Wenn die Farbe nicht vorhanden ist, wird die verwendete Farbe aus der Eigenschaft 'Farbe' übernommen.

In der Praxis müssen Sie die colorEigenschaft ändern und box-shadowohne Farbe verlassen:

box-shadow: 1px 2px 3px;
color: #a00;

Unterstützung

• Safari 6+
• Chrome 20+ (mindestens)
• Firefox 13+ (mindestens)
• IE9 + (IE8 unterstützt überhaupt nicht box-shadow)

Demo

div {
    box-shadow: 0 0 50px;
    transition: 0.3s color;
}
.green {
    color: green;
}
.red {
    color: red;
}
div:hover {
    color: yellow;
}

/*demo style*/
body {
    text-align: center;
}
div {
    display: inline-block;
    background: white;
    height: 100px;
    width: 100px;
    margin: 30px;
    border-radius: 50%;
}

<div class="green"></div>
<div class="red"></div>

Der im Kommentar unten erwähnte Fehler wurde inzwischen behoben :)

Sie können einen CSS-Vorprozessor verwenden, um Ihr Skinning durchzuführen. Mit Sass können Sie etwas Ähnliches tun:

_theme1.scss:

$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.

_theme2.scss:

$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.

styles.scss:

// import whichever theme you want to use
@import 'theme2';

-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;

Wenn Sie kein Site-weites, sondern ein klassenbasiertes Theming benötigen, können Sie dies tun: http://codepen.io/jjenzz/pen/EaAzo

Sie können dies mit der CSS-Variablen tun

.box-shadow {
    --box-shadow-color: #000; /* Declaring the variable */
    width: 30px;                
    height: 30px;
    box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */

}

.box-shadow:hover  {
    --box-shadow-color: #ff0000; /* Changing the value of the variable */
}

Ein schnelles Kopieren / Einfügen, das Sie für Chrome und Firefox verwenden können, wäre: (Ändern Sie das Material nach dem #, um die Farbe zu ändern.)

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;

Die Antwort von Matt Roberts ist für Webkit-Browser (Safari, Chrome usw.) korrekt, aber ich dachte, jemand da draußen möchte vielleicht eine schnelle Antwort, anstatt zu lernen, wie man programmiert, um Schatten zu erzeugen.

Ja, es gibt einen Weg

box-shadow 0 0 17px 13px rgba(30,140,255,0.80) inset

Vielleicht ist das neu (ich bin auch ziemlich beschissen bei CSS3), aber ich habe eine Seite, die genau das verwendet, was Sie vorschlagen:

-moz-box-shadow: 10px 10px 5px #384e69;
-webkit-box-shadow: 10px 10px 5px #384e69;
box-shadow: 10px 10px 5px #384e69;}

.. und es funktioniert gut für mich (zumindest in Chrome).