I have the following CSS:
box-shadow: inset 0px 0px 2px #a00;
Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites the original rule.
There doesn't seem to be a box-shadow-color
, at least Google turns nothing up.
Actually… there is! Sort of. box-shadow
defaults to color
, just like border
does.
According to http://dev.w3.org/.../#the-box-shadow
The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.
In practice, you have to change the color
property and leave box-shadow
without a color:
box-shadow: 1px 2px 3px;
color: #a00;
box-shadow
at all) 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>
The bug mentioned in the comment below has since been fixed :)