内部 div 内容上的 Inset Box 阴影
Inset Box shadow over the inner div content
我正在尝试使用 div #content 实现插图 box-shadow，如果 #content 不使用背景，一切都很好，但是如果我把 background-color 在 #content 中，方框阴影上方的 #content，如何解决？
预期结果：插入框阴影仍然覆盖 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>
尝试使用 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 内单击或悬停将不起作用...如果您想要活动工作，您需要从顶部放置一些 space 和底部像下面
#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>
我正在尝试使用 div #content 实现插图 box-shadow，如果 #content 不使用背景，一切都很好，但是如果我把 background-color 在 #content 中，方框阴影上方的 #content，如何解决？
预期结果：插入框阴影仍然覆盖 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>
尝试使用 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 内单击或悬停将不起作用...如果您想要活动工作，您需要从顶部放置一些 space 和底部像下面
#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>