使用邊框半徑時，總會出現白色邊角

我想在白色背景上放置黑色邊框，並且都具有邊框半徑。但是角落裏總是有一個白色的空間。這是爲什麼？使用邊框半徑時，總會出現白色邊角

下面是代碼：

.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

使用邊框半徑時，總會出現白色邊角

回答

相關問題