html阴影颜色,CSS阴影颜色的继承

CSS

语言：

CSSSCSS

确定

.cards {

margin: auto;

padding: 1em;

background: white;

width: 640px;

}

/* Colors for the cards */

.red {

background: tomato;

}

.blue {

background: steelblue;

}

.purple {

background: mediumpurple;

}

.brown {

background: rosybrown;

}

/* Selecting the child elements by the tag name of "div"

this applies the styles to all divs */

.cards > div {

margin: 2em;

width: 250px;

height: 250px;

display: inline-block;

position: relative;

transition: transform 0.5s;

}

/* On hover it scales 1.2 times the original size

and changes the cursor to pointer */

.cards > div:hover {

transform: scale(1.2);

cursor: pointer;

}

/* This is the way to create those shadows

which are a trend now. Generally they are always

smaller in width than the parent elements */

.cards > div:after {

content: "";

background: inherit;

filter: blur(.9em);

opacity: 0;

height: 20%;

width: 70%;

position: absolute;

margin-left: auto;

margin-right: auto;

left: 0;

right: 0;

bottom: 0;

transition: opacity 1s, bottom 0.5s;

}

.cards > div:hover:after {

opacity: .8;

bottom: -1.2em;

}