html - CSS3 上带有阴影效果的 3D 效果

Question

我正在尝试使用 css3 实现这种 3D 效果，

这是我到目前为止所尝试的：

    border-radius: 12px;
    box-shadow: 0px 0px 11px #000000;

Answer 1

To make a shadow like above image you have to use after before CSS3 tag and apply to div.

.effect
{
     position:relative;       
    -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;
}

.effect:before, .effect:after
{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect:after
{
    right:10px; 
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg); 
    -moz-transform:skew(8deg) rotate(3deg);     
    -ms-transform:skew(8deg) rotate(3deg);     
    -o-transform:skew(8deg) rotate(3deg); 
    transform:skew(8deg) rotate(3deg);
}

visit to stupidcodes.com for more example...

Answer 2

.shadow-bottom {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}