我正在尝试使用div box-shadow实现插入#content，如果#content不使用背景，但如果我将background-color放入#content，一切正常}，#content在盒子阴影上，如何解决这个问题？
预期结果：Inset Box Shadow仍然超过Div内容的背景
这是我的代码：
#container {
-webkit-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
-moz-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
border-radius: 5px;
overflow-y: scroll;
height: 200px;
width: 300px;
}
#content {
background: #fff;
width: 260px;
margin-left: 10px;
}<div id="container" class="some_class">
<div id="content" class="">
Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim
aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum
at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam
dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget
sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien
quam in eu vel nulla. Iaculis et dui ullamcorper, non egestas condimentum dui phasellus. Sit non mattis a, leo in imperdiet erat nec pulvinar. Ornare massa justo cursus, convallis mauris interdum felis. Felis posuere metus, ornare pede montes, morbi
urna sed temporibus non, nibh inceptos enim turpis natoque ac praesent. Litora vivamus veritatis vel nonummy, ut qui est pellentesque at alias, sed condimentum dapibus. Rhoncus lacinia. Imperdiet nulla sem fringilla, purus enim amet, nascetur faucibus,
adipiscing neque ut bibendum, at felis nec in. Mauris ultricies, et pede id potenti in nec, mi elit rhoncus ligula, mollis lacus congue scelerisque magna. Ultrices risus elit lectus nunc blandit quis, magna enim ipsum, nostra leo vestibulum quis nibh
arcu sed. Amet a sagittis fringilla, massa vitae rhoncus, a magna curabitur in.
</div>
</div>
答案 0 :(得分：2)
尝试将z-index:-1与position:relative一起使用到内部div #content
#container {
-webkit-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
-moz-box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
border-radius: 5px;
overflow-y: scroll;
height: 200px;
width: 300px;
font: 13px Verdana;
}
#content {
background: red;
color: #fff;
width: 260px;
margin-left: 10px;
position: relative;
z-index: -1;
}<div id="container" class="some_class">
<div id="content" class="">
Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim
aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum
at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam
dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget
sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien
quam in eu vel nulla. Iaculis et dui ullamcorper, non egestas condimentum dui phasellus. Sit non mattis a, leo in imperdiet erat nec pulvinar. Ornare massa justo cursus, convallis mauris interdum felis. Felis posuere metus, ornare pede montes, morbi
urna sed temporibus non, nibh inceptos enim turpis natoque ac praesent. Litora vivamus veritatis vel nonummy, ut qui est pellentesque at alias, sed condimentum dapibus. Rhoncus lacinia. Imperdiet nulla sem fringilla, purus enim amet, nascetur faucibus,
adipiscing neque ut bibendum, at felis nec in. Mauris ultricies, et pede id potenti in nec, mi elit rhoncus ligula, mollis lacus congue scelerisque magna. Ultrices risus elit lectus nunc blandit quis, magna enim ipsum, nostra leo vestibulum quis nibh
arcu sed. Amet a sagittis fringilla, massa vitae rhoncus, a magna curabitur in.
</div>
</div>
以上解决方案只是视觉效果......内部#content点击或悬停不起作用...如果你想要活动，你需要从上到下放一些空间，如下所示
#container {
box-shadow: inset 0px 0px 21px 5px rgba(0, 0, 0, 0.55);
border-radius: 5px;
height: 200px;
width: 300px;
font: 13px Verdana;
padding-top: 15px
}
.scroll {
height: calc(100% - 15px);
overflow-y: scroll;
}
#content {
background: red;
color: #fff;
width: 260px;
margin-left: 10px;
}<div id="container" class="some_class">
<div class="scroll">
<div id="content" class="">
<input type="text" /> Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius
eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates
dui eros libero. Etiam vestibulum at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae
faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra
ut. Pellentesque vehicula. Eget sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo
scelerisque libero massa. Sapien quam in eu vel nulla. Iaculis et dui ullamcorper, non egestas condimentum dui phasellus. Sit non mattis a, leo in imperdiet erat nec pulvinar. Ornare massa justo cursus, convallis mauris interdum felis. Felis posuere
metus, ornare pede montes, morbi urna sed temporibus non, nibh inceptos enim turpis natoque ac praesent. Litora vivamus veritatis vel nonummy, ut qui est pellentesque at alias, sed condimentum dapibus. Rhoncus lacinia. Imperdiet nulla sem fringilla,
purus enim amet, nascetur faucibus, adipiscing neque ut bibendum, at felis nec in. Mauris ultricies, et pede id potenti in nec, mi elit rhoncus ligula, mollis lacus congue scelerisque magna. Ultrices risus elit lectus nunc blandit quis, magna enim
ipsum, nostra leo vestibulum quis nibh arcu sed. Amet a sagittis fringilla, massa vitae rhoncus, a magna curabitur in.
</div>
</div>
</div>