¿Existe una propiedad 'box-shadow-color'?
Tengo el siguiente CSS:
box-shadow: inset 0px 0px 2px #a00;
Ahora estoy intentando extraer ese color para que los colores de la página se puedan personalizar. ¿Hay alguna manera de hacer esto? Simplemente eliminar el color y luego usar la misma tecla nuevamente sobrescribe la regla original.
No parece haber ninguna información box-shadow-color, al menos Google no muestra nada.
Utilice la respuesta aceptada a continuación, utilizando variables CSS, no esta solución.
En realidad… ¡lo hay! Algo así como. box-shadowEl valor predeterminado es color, tal como borderlo hace.
Según http://dev.w3.org/.../#the-box-shadow
El color es el color de la sombra. Si el color está ausente, el color utilizado se toma de la propiedad 'color'.
En la práctica, hay que cambiar la colorpropiedad y dejar box-shadowsin color:
box-shadow: 1px 2px 3px;
color: #a00;
Apoyo
- Safari 6+
- Chrome 20+ (al menos)
- Firefox 13+ (al menos)
- IE9+ (IE8 no es compatible
box-shadowen absoluto)
Manifestación
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>El error mencionado en el comentario a continuación ya se ha solucionado :)
No:
http://www.w3.org/TR/css3-background/#the-box-shadow
Puede verificar esto en Chrome y Firefox consultando la lista de estilos calculados. Otras propiedades que tienen métodos abreviados (como border-radius) tienen sus variaciones definidas en la especificación.
Como ocurre con la mayoría de las propiedades CSS "largas" que faltan, las variables CSS pueden resolver este problema:
#el {
--box-shadow-color: palegoldenrod;
box-shadow: 1px 2px 3px var(--box-shadow-color);
}
#el:hover {
--box-shadow-color: goldenrod;
}
Puedes hacer esto con la variable 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 */
}
