用html制作阴影效果,HTML – 如何在中间css中制作阴影

从

CSS drop-shadows without images by Nicolas Gallagher

Horizontal curves

.drop-shadow {

position: relative;

float: left;

width: 40%;

padding: 1em;

margin: 2em 10px 4em;

background: #FFF;

-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

}

.drop-shadow:before, .drop-shadow:after {

content: "";

position: absolute;

z-index: -2;

}

.curved-hz-2:before {

top: 0;

bottom: 0;

left: 10px;

right: 10px;

-moz-border-radius: 100px / 10px;

border-radius: 100px / 10px;

}

.curved:before {

top: 10px;

bottom: 10px;

left: 0;

right: 50%;

-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);

-moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);

box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);

-moz-border-radius: 10px / 100px;

border-radius: 10px / 100px;

}