C'è una proprietà 'box-shadow-color'?

Question

Ho il seguente CSS:

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

Ora sto cercando di estrarre quel colore per rendere 'personalizzabile' i colori di pagina. C'è un modo di fare questo? semplicemente rimuovendo il colore, e poi utilizzare nuovamente lo stesso tasto successivamente sovrascrive la regola originale.

Non sembra essere un box-shadow-color, almeno Google si trasforma niente su.

Answer 1

No:

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

È possibile verificare questo in Chrome e Firefox controllando l'elenco degli stili calcolati. Altre proprietà che hanno metodi di stenografia (come border-radius ) hanno loro variazioni definite nelle specifiche.

Come la maggior parte mancante "lunga mano" proprietà CSS, CSS variabili possono risolvere questo problema:

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

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

Answer 2

In realtà ... non c'è! Una specie di. default box-shadow a color, proprio come border fa.

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

  

Il colore è il colore dell'ombra. Se il colore è assente, l'usato   il colore è preso dalla proprietà ‘color’.

In pratica, è necessario modificare la proprietà color e congedo box-shadow senza un colore:

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

Supporto

• Safari 6
• Chrome 20+ (almeno)
• Firefox 13+ (almeno)
• IE9 + (IE8 non supporta box-shadow affatto)

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>

Il bug menzionato nel commento qui sotto da allora è stato fissato:)

Answer 3

Si potrebbe usare un CSS pre-processore per fare il vostro scuoiatura. Con Sass si può fare qualcosa di simile a questo:

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

Se non è a livello di sito tematizzazione ma classe basata tematizzazione è necessario, allora si può fare questo: http: / /codepen.io/jjenzz/pen/EaAzo

Answer 4

E 'possibile fare questo con Variabile CSS

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

Answer 5

Una rapida e copia / incolla è possibile utilizzare per Chrome e Firefox sarebbe: (cambiare le cose dopo il # per cambiare il colore)

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

Risposta Matt Roberts' è corretto per i browser WebKit (Safari, Chrome, ecc), ma ho pensato che qualcuno là fuori potrebbe desiderare una risposta rapida, piuttosto che essere detto di imparare a programmare per fare alcune ombre.

Answer 6

Sì, c'è un modo

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

Answer 7

Forse questo è nuovo (io sono anche abbastanza schifo a CSS3), ma ho una pagina che utilizza esattamente ciò che si suggeriscono:

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

.. e funziona bene per me (in Chrome, almeno).