css3中怎么设置阴影,如何在css3中创建阴影框

的技术应用到一个单一的元素。从该元素生成几个伪元素，然后将其推后，如#box:before, #box:after。这些伪元素不是明确定位的。 然后您必须将css3框阴影应用于这些元素并应用转换。 了解更多关于他们在以下网站：

Content and content

的CSS：

#box

{

position: relative;

width: 60%;

background: #ddd;

-moz-border-radius: 4px;

border-radius: 4px;

padding: 2em 1.5em;

color: rgba(0,0,0, .8);

text-shadow: 0 1px 0 #fff;

line-height: 1.5;

margin: 60px auto;

}

#box:before, #box:after

{

z-index: -1;

position: absolute;

content: "";

bottom: 15px;

left: 10px;

width: 50%;

top: 80%;

max-width:300px;

background: rgba(0, 0, 0, 0.7);

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

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

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

-webkit-transform: rotate(-3deg);

-moz-transform: rotate(-3deg);

-o-transform: rotate(-3deg);

-ms-transform: rotate(-3deg);

transform: rotate(-3deg);

}

#box:after

{

-webkit-transform: rotate(3deg);

-moz-transform: rotate(3deg);

-o-transform: rotate(3deg);

-ms-transform: rotate(3deg);

transform: rotate(3deg);

right: 10px;

left: auto;

}