如何在中间css制作阴影

Question

我正在使用影子盒，但它会让所有容器都被阴影包裹起来，我怎样才能在中间制作阴影，如上图所示？

Answer 1

来自Nicolas Gallagher的CSS drop-shadows without images

<强> FIDDLE

<div class="drop-shadow curved curved-hz-2">
    <p>Horizontal curves</p>
</div>

.drop-shadow {
   position: relative;
   float: left;
   width: 40%;
   padding: 1em;
   margin: 2em 10px 4em;
   background: #FFF;
   -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;
}
.drop-shadow:before, .drop-shadow:after {
    content: "";
    position: absolute;
    z-index: -2;
}
.curved-hz-2:before {
    top: 0;
    bottom: 0;
    left: 10px;
    right: 10px;
    -moz-border-radius: 100px / 10px;
    border-radius: 100px / 10px;
}
.curved:before {
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 50%;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    -moz-border-radius: 10px / 100px;
    border-radius: 10px / 100px;
}

Answer 2

以下是您可以这样做的方法：

两种方式你可以做到这一点（哪个适合你）

第一个：使用边界半径

网址 http://jsfiddle.net/qTYps/2/ - 未在IE8上测试

您可以通过更改rgba值

来更改阴影（浓度/亮度）或颜色

.box {
  width:90%;
  padding:20px;
  background:#fff;
  margin:20px auto 60px;
  border-radius:2px;
}

.css3-shadow{
   position:relative;
   -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); // You can remove this if you only want bottom shadow
   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3); // You can remove this if you only want bottom shadow
}

.css3-shadow:after{
  content:"";
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  bottom:0px;
  left:10%;
  right:10%;
  width:80%;
  height:50%;
  -moz-border-radius:100%;
  border-radius:100%;
}

第二种方法 - 使用径向渐变 - 您可以通过更改百分比和rgb的值来更改颜色的百分比和亮度 - 暗度。

网址 http://jsfiddle.net/qTYps/1/ - 未在IE8上测试

.box {
  width:90%;
  padding:20px;
  background:#fff;
  margin:20px auto 60px;
  border-radius:2px;
}

.css3-shadow{
  position:relative;
  -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
}

.css3-shadow:after{
  content:"";
  position:absolute;
  z-index:-1;
  top:100%;
  bottom:0;
  width:120%;
  height:50px;
  left:-10%;
  right:-10%;
  background:-webkit-radial-gradient(50% -3%, ellipse cover, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 30%);
  background:radial-gradient(ellipse at 50% -3%, rgba(00, 00, 00, 0.5), rgba(97, 97, 97, 0.0) 30%);
}

您可以根据需要更改阴影百分比，像素和rgba值。这应该做到。

Answer 3

CSS3 box-shadow属性可以具有inset值。 您可以使用多个插入阴影实现类似的外观，但选择这些值可能非常耗时。

此处有更多示例：http://css-tricks.com/snippets/css/css-box-shadow/

有关多个CSS阴影的信息：http://www.techrepublic.com/blog/web-designer/css3-layering-multiple-shadows-creates-lightweight-pages/