Mam następujący CSS:
box-shadow: inset 0px 0px 2px #a00;
Teraz próbuję wyodrębnić ten kolor, aby kolory stron były „skinowalne”. Czy jest na to jakiś sposób? Po prostu usuwając kolor, a następnie ponownie używając tego samego klucza, zastępujesz oryginalną regułę.
Wydaje się, że nie ma box-shadow-color
, przynajmniej Google nic nie pokazuje.
css
box-shadow
Epaga
źródło
źródło
Odpowiedzi:
Nie:
http://www.w3.org/TR/css3-background/#the-box-shadow
Możesz to sprawdzić w Chrome i Firefox, sprawdzając listę stylów obliczeniowych. Inne właściwości, które mają metody skrótowe (jak
border-radius
), mają odmiany zdefiniowane w specyfikacji.Podobnie jak w przypadku większości brakujących właściwości CSS „długiej ręki”, zmienne CSS mogą rozwiązać ten problem:
źródło
Właściwie… jest! Raczej.
box-shadow
domyślniecolor
, podobnie jakborder
robi.Według http://dev.w3.org/.../#the-box-shadow
W praktyce musisz zmienić
color
właściwość i wyjśćbox-shadow
bez koloru:Wsparcie
box-shadow
)Próbny
Błąd wymieniony w komentarzu został naprawiony :)
źródło
color
właściwości. code.google.com/p/chromium/issues/detail?id=133745color
do elementu potomnego.Możesz użyć preprocesora CSS do wykonania skórowania. Dzięki Sass możesz zrobić coś podobnego do tego:
_theme1.scss:
_theme2.scss:
styles.scss:
Jeśli nie potrzebujesz motywów obejmujących całą witrynę, ale potrzebujesz motywów opartych na klasach, możesz to zrobić: http://codepen.io/jjenzz/pen/EaAzo
źródło
Możesz to zrobić za pomocą CSS Variable
źródło
Szybkie i skopiuj / wklej, którego możesz użyć w Chrome i Firefox, to: (zmień rzeczy po #, aby zmienić kolor)
Odpowiedź Matta Robertsa jest poprawna w przypadku przeglądarek webkit (safari, chrome itp.), Ale pomyślałem, że ktoś tam może chcieć szybkiej odpowiedzi, niż zostać poproszony o nauczenie się programowania tworzenia cieni.
źródło
Tak, jest sposób
źródło
Może to jest nowe (jestem też dość bzdurny w css3), ale mam stronę, która używa dokładnie tego, co sugerujesz:
.. i działa dobrze dla mnie (przynajmniej w Chrome).
źródło