使用边框半径时，总会出现白色边角

我想在白色背景上放置黑色边框，并且都具有边框半径。但是角落里总是有一个白色的空间。这是为什么？使用边框半径时，总会出现白色边角

下面是代码：

.main { 
 
    background-color: #000; 
 
    padding: 10px; 
 
} 
 

 
.outer { 
 
    height: 100px; 
 
    border-radius: 4px; 
 
    margin: 0 10px; 
 
    background-color: #fff; 
 
} 
 

 
.inner { 
 
    background-color: #000; 
 
    border-radius: 4px; 
 
    height: 50px; 
 
    background-clip: padding-box; 
 
}

<div class="main"> 
 
    <div class="outer"> 
 
    <p class="inner"> 
 
    </p> 
 
    </div> 
 
</div>

这里是小提琴http://jsfiddle.net/zoosyuvq/1/

来源

2017-05-05 ivan wang

在这个特定的情况下，添加：

.inner { 
    margin:-1px; 
}

应该解决它。这将划定边界，所以舍入计算的结果相同。

来源

2017-05-05 15:17:51 ryachza

这样做。

.main { 
 
    background-color: #000; 
 
    padding: 10px; 
 
} 
 

 
.outer { 
 
    height: 100px; 
 
    border-radius: 0 0 4px 4px; 
 
    margin: 0 10px; 
 
    background-color: #fff; 
 
} 
 

 
.inner { 
 
    background-color: #000; 
 
    border-radius: 0 0 4px 4px; 
 
    height: 50px; 
 
    background-clip: padding-box; 
 
}

<div class="main"> 
 
    <div class="outer"> 
 
    <p class="inner"> 
 
    </p> 
 
    </div> 
 
</div>

来源

2017-05-05 15:19:57 LXhelili

感谢，但实际上在我的项目的主要地面和内部接地的颜色是不同的，所以半径是必要的... –

试试这个与顶部边角5px的边界半径。

.main { 
 
    background-color: #000; 
 
    padding: 10px; 
 
} 
 

 
.outer { 
 
    height: 100px; 
 
    border-radius:5px 5px 4px 4px; 
 
    margin: 0 10px; 
 
    background-color: #fff; 
 
} 
 

 
.inner { 
 
    background-color: #000; 
 
    border-radius: 4px; 
 
    height: 50px; 
 
    background-clip: padding-box; 
 
    box-sizing: border-box; 
 
}

<div class="main"> 
 
    <div class="outer"> 
 
    <p class="inner"> 
 
    </p> 
 
    </div> 
 
</div>

来源

2017-05-05 15:41:27 LXhelili

使用边框半径时，总会出现白色边角

回答

相关问题