[英]Box shadow: hide top shadow
I've read like 10 questions here and could not apply them to my situation. 我在这里已经阅读了10个问题,无法将它们应用于我的情况。
I've created the example here 我在这里创建了示例
http://jsfiddle.net/Y4uHm/4/ http://jsfiddle.net/Y4uHm/4/
I need to hide the shadow on the top side of the content box. 我需要隐藏内容框顶部的阴影。 I am not sure if I am doing it right or I should tailor image in some other way. 我不确定自己是否做对了,还是应该以其他方式定制图像。 I believe it can be done in some more smart way than using background to create side shadows. 我相信,与使用背景创建侧影相比,可以通过更智能的方式来完成此操作。 Thanks. 谢谢。
To satisfy the rules: 要满足规则:
HTML code HTML代码
<div class="container-wrapper">
blahblah header is here
</div>
<div class="container-wrapper breadcrumbz">
<div class="pusher"></div> <!-- only for experiment. i know about margins and paddings :) -->
<div class="content">
There should be no shadow on top of this block
</div>
</div>
CSS 的CSS
body {
background: #4ca8cb;
}
.container-wrapper {
margin: 0 auto;
max-width: 500px;
padding:0 50px;
}
.breadcrumbz {
background: url('https://dl.dropboxusercontent.com/u/14562883/shadowline.png') no-repeat top center;
}
.pusher {
height: 14px;
}
.content {
box-shadow: 0px 0px 3px 1px #555;
background-color: #e7eaeb;
height: 200px;
}
Update 更新资料
I've solved that. 我已经解决了。 The solution is need to be improved but I got the method. 该解决方案需要改进,但我知道了方法。
I can move the bottom block "under" using 我可以使用
position:relative
and negative margin 和负利润
you can use :before
pseudoelement 您可以使用:before
伪元素:before
.content {
background-color: #e7eaeb;
height: 200px;
position: relative;
}
.content::before {
content: "";
position: absolute;
width: 100%;
height: 198px;
background-color: transparent;
z-index: -1;
box-shadow: 0px 0px 3px 1px black;
top: 2px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.