html - 如何在css3中创建一个阴影框

Question

我一直在寻找创建如下阴影框的方法。在网上查了各种教程，好像都搞不定。

我正在尝试为我的网站创建一个如上所示的阴影框，但我不知道如何获得适合框中心的像素数。

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

谢谢一堆。

Answer 1

检查我一年前做的这个演示。

还有我现在做的这个简化版本。

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 操作，然后将其用作背景图像以增加深度。