如何在中间css制作阴影

Question

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

Answer 1

来自 Nicolas Gallagher的没有图像的CSS阴影

小提琴

<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

CSS3box-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/