如何在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

该技术适用于单个元素。从该元素生成几个伪元素，然后将其推到它后面，如#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;
  }

Answer 3

在html5中，有用于生成此类阴影的box-shadow属性... 之前它需要flash或photoshop来创建这样的东西......

这应该会有所帮助：它还具有所有其他功能......

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

Answer 4

这种阴影在CSS3中不太可能，解决方案是通过创建阴影的外部图像，然后将背景图像应用于元素。

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