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.
css
box-shadow
Epaga
quelle
quelle
Antworten:
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:
quelle
Eigentlich ... gibt es! Art von.
box-shadow
Der Standardwertcolor
ist genau wieborder
.Laut http://dev.w3.org/.../#the-box-shadow
In der Praxis müssen Sie die
color
Eigenschaft ändern undbox-shadow
ohne Farbe verlassen:Unterstützung
box-shadow
)Demo
Der im Kommentar unten erwähnte Fehler wurde inzwischen behoben :)
quelle
color
Eigenschaft nicht erbt . code.google.com/p/chromium/issues/detail?id=133745color
auf das untergeordnete Element anwenden .Sie können einen CSS-Vorprozessor verwenden, um Ihr Skinning durchzuführen. Mit Sass können Sie etwas Ähnliches tun:
_theme1.scss:
_theme2.scss:
styles.scss:
Wenn Sie kein Site-weites, sondern ein klassenbasiertes Theming benötigen, können Sie dies tun: http://codepen.io/jjenzz/pen/EaAzo
quelle
Sie können dies mit der CSS-Variablen tun
quelle
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.)
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.
quelle
Ja, es gibt einen Weg
quelle
Vielleicht ist das neu (ich bin auch ziemlich beschissen bei CSS3), aber ich habe eine Seite, die genau das verwendet, was Sie vorschlagen:
.. und es funktioniert gut für mich (zumindest in Chrome).
quelle