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

Question

我有一张带有背景图片的卡片。此卡片中有一个宽度设置为 100% 的 div，但您仍然可以稍微看到 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

Answer 1

不要重复 border-radius。这就是产生这些工件的原因。

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

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

同时删除 left: 50% 和 transform

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