合并两个“DIV”和Box Shadow

Question

这可以合并圆形和方形div并在css3中显示单个框阴影吗？我知道我们可以隐藏任何div的边界的单边。但我的需求是不同的：

Example Image

如果可以，我该如何实现呢？

Answer 1

你实际上只需要一个div，然后可以在其:before和:after伪元素上使用定位（下面的CSS是一个起点）：

Demo Fiddle

CSS

div, div:before {
    height:50px;
    -webkit-box-shadow: 0 0 4px 0 #424242;
    box-shadow: 0 0 4px 0 #424242;
    position:relative;
    margin-top:200px;
}
div:before {
    height:100px;
    margin-top:0;
    width:100px;
    display:block;
    background:white;
    position:absolute;
    top:-25px;
    left:100px;
    content:'';
    border-radius:100%;
}
div:after {
    height:100%;
    width:100%;
    display:block;
    background:white;
    position:absolute;
    top:-0;
    left:0;
    content:'';
}

Answer 2

我来a very similar answer。使用z-index确保它正常工作，最终看到内容：）

<div class="shaped"> </div>

CSS

.shaped {
  margin:2em 0;
  box-shadow:0 0 5px;/* will be inherited by pseudo under */
  height:2em;
  position:relative;
  background:white;/* will be inherited by pseudo on top */
}
.shaped:before, .shaped:after {
  content:'';
  position:absolute;
  height:2em;
  width:2em;
  padding:1em;
  background:inherit;
  border-radius:100%;
  margin:-1em 2em;
  z-index:1;
}
.shaped:before {
  box-shadow:inherit;
  z-index:-1;
}
.shaped>* {/* let's see whatever comes inside */
  position:relative;
  z-index:2;
}