有没有办法在div中制作双面内阴影？

Question

有没有办法用css中的阴影框制作双面内阴影，如下图所示？

Answer 1

您可以使用背景图片填充div：

＆＃13;

＆＃13;

#custom{
  min-width: 200px;
  min-height:200px;
  width : 100%;
  background-image : url("http://i.stack.imgur.com/y6HMs.png");
  background-repeat : no-repeat;
  background-size: contain;
}

＆＃13;

<div id="custom">
  
</div>  

＆＃13;

＆＃13;

＆＃13;

并确保给它background-size: contain;，以便图像适合所有div。

修改

这是在div中使用边框的片段，因此您可以看到图像正在填充所有空间。

＆＃13;

＆＃13;

#custom {
  min-width: 200px;
  min-height: 200px;
  width: 100%;
  background-image: url("http://i.stack.imgur.com/y6HMs.png");
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid black;
}

＆＃13;

<div id="custom">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以对两个阴影使用伪元素：

div {
  box-shadow: inset 0 0 2em -.5em gray;
  line-height: 3em;
  text-align: center;
  position: relative;
  overflow: hidden;
}

div:before,
div:after {
  content: '';
  display: inline-block;
  width: 40%;
  height: 100%;
  position: absolute;
  left: 5%;
  top: -100%;
  border-radius: 50%;
  box-shadow: 0 0 2em #aaa;
}

div:after {
  left: auto;
  right: 5%;
}

div[contenteditable] {
  margin-top: 3em;
  display: inline-block;
  outline: none;
}

<div>hello world</div>
<div contenteditable>TYPE HERE...and watch the shadows</div>

这些阴影具有响应行为。当div宽度扩大时，它们的大小会扩大。