html - cover-img 和 cover-body 之间的黑线

Question

我使用封面图像填充侧边栏，但在未填充正文的封面图像和封面正文本身之间出现了一条黑线。您可以在实际中看到它 here .我很确定这不是边界或其他任何东西。

谢谢!

HTML

<aside id="sidebar">
 <div class="cover-img">
 <div class="cover-body">
 <div class="logo" style="margin-bottom:30px;">

CSS

.cover-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-box-shadow: 1px 0 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 1px 0 1px rgba(0,0,0,0.15);
    box-shadow: 1px 0 1px rgba(0,0,0,0.15);
}

.cover-body {
    position: absolute;
    bottom: 0;
    padding: 50px 10% 10%;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.cover-body:before {
    content: '';
    position: absolute;
    top: -80px;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
    background-image: -moz-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
    background-image: -o-linear-gradient(bottom,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
    background-image: linear-gradient(to top,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 25%,rgba(0,0,0,0) 100%);
}

.cover-body {
    padding-top: 20px !important;
    padding-bottom: 0 !important;
}

Answer 1

你在 .about-blog-author 上有一个 box-shadow 是这样做的:

-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
-moz-box-shadow: 0 -1px 0 rgba(0,0,0,0.3);
box-shadow: 0 -1px 0 rgba(0,0,0,0.3);

去掉它或者把-1px改成0