如何在css3中创建阴影框

Question

我一直在寻找如下创建阴影框的方法。看了各种教程在线，似乎无法得到它的工作。

我想创建一个眼影盒如上为我的网站，但我不知道怎么弄的像素数适合盒子的中心。

CSS3应该如何？任何帮助都可以帮助我。

谢谢你一堆。

Answer 1

检查这我做过的demo一年前。

而这个simplified version，我现在做。

HTML：<div class="box"></div>

相关CSS：

.box { 
    width: 20em; height: 6em; 
    border: solid 1px #ccc; 
    position: relative; 
    background: white; 
} 
.box:before, .box:after { 
    min-height: 45%; width: 65%; 
    border-radius: .2em; 
    box-shadow: 0 0 .625em rgba(204,204,204,.4); 
    position: absolute; 
    z-index: -1; 
    background: rgba(204,204,204,.4); 
    content: ''; 
} 
.box:before { 
    bottom: 0; left: .3em; 
    transform: rotate(-5deg); 
} 
.box:after { 
    right: .3em; bottom: 0; 
    transform: rotate(5deg); 
} 

你并不需要得到的像素数。您可以使用%值。

Answer 2

在HTML5中，有制造这种阴影box-shadow属性... 此前它需要闪光灯或Photoshop创建这样的事情......

这应该是有帮助的：它具有所有其他功能太...

http://w3schools.com/css3/default.asp

Answer 3

这种阴影是不是在CSS3到目前为止可能的话，解决的办法是通过创建阴影的外部图像，然后将背景图像应用它的元素。

您也可以找到Photoshop的动作创建逼真的阴影，然后用它作为背景图像添加深度..

Answer 4

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

http://nimbupani.com/drop-shadows-with-css3.html
http://nicolasgallagher.com/css-drop-shadows-without-images/
另外，下面的代码是从http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow
的HTML

<div id="box"> 
    <p>Content and content</p> 
</div> 

的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; 
    }