Czy istnieje właściwość „box-shadow-color”?

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.

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:

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

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

Właściwie… jest! Raczej. box-shadowdomyślnie color, podobnie jak borderrobi.

Według http://dev.w3.org/.../#the-box-shadow

Kolor to kolor cienia. Jeśli kolor jest nieobecny, użyty kolor jest pobierany z właściwości „color”.

W praktyce musisz zmienić colorwłaściwość i wyjść box-shadowbez koloru:

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

Wsparcie

• Safari 6+
• Chrome 20+ (przynajmniej)
• Firefox 13+ (przynajmniej)
• IE9 + (IE8 w ogóle nie obsługuje box-shadow)

Próbny

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>

Błąd wymieniony w komentarzu został naprawiony :)

Możesz użyć preprocesora CSS do wykonania skórowania. Dzięki Sass możesz zrobić coś podobnego do tego:

_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;

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

Możesz to zrobić za pomocą CSS Variable

.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 */
}

Szybkie i skopiuj / wklej, którego możesz użyć w Chrome i Firefox, to: (zmień rzeczy po #, aby zmienić kolor)

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

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.

Tak, jest sposób

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

Może to jest nowe (jestem też dość bzdurny w css3), ale mam stronę, która używa dokładnie tego, co sugerujesz:

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

.. i działa dobrze dla mnie (przynajmniej w Chrome).