css - 位于具有相同宽度的图像上方的 div 周围的暗线

Question

我有一张带有背景图片的卡片。此卡片中有一个 div，其宽度设置为，100%但您仍然可以稍微看到 div 两侧的背景图像。我已经删除了，box-shadow以便您可以更好地看到问题。

/*This is the main card*/
.card
{
    width:              465px;
    height:             700px;
    display:            inline-block; 
    position:           relative;
    /*box-shadow:       3px 3px 5px #D5D5D5;*/
    border-radius:      15px;
}

/*This assigns the background image to the card*/
.card:nth-Child(1)
{
    margin-right:       30px;   
    background-size:    100%;
    background-image:   url('images/daniel-malikyar-F1leFzugQfM- 
    unsplash.jpg');
}

/*This is the rectangular div positioned at the bottom of the card*/
.cardContentContainer
{
    width:              100%;
    height:             350px;
    bottom:             0;
    overflow:           hidden;
    position:           absolute;                  
    background-color:   white;
    border-bottom-left-radius:  15px;
    border-bottom-right-radius: 15px;
}

我尝试给内容容器一个1px白色边框，但线条仍然可见。

要求的笔：https ://codepen.io/anon/pen/voKMGG

标签： css

Answer 1

不要重复边界半径。这就是这些文物的原因。

.card
{
    ...
    border-radius:      15px;
    overflow: hidden;
}

border-radius-*并从中删除.cardContentContainer

同时删除left: 50%和transform

https://codepen.io/vovchisko/pen/gVMyRW