CSS邊框半徑不適用於邊框div

我的CSS有問題。我將border-radius屬性添加到div元素。背景顏色顯示圓角，所以這個工程。但div周圍的邊界保持他的尖角。CSS邊框半徑不適用於邊框div

我的CSS是這樣的：

padding-top:1px; 
padding-left:2px; 
background: linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
background: -moz-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
background: -webkit-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
background: -ms-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
background: -o-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#B5B5B5,GradientType=1); 
height: 245px; 
padding-right: 30px !important; 
border: 1px solid silver; 
border-radius: 5px;

來源

2015-08-20 Yannick Schneider

您可以添加CSS選擇器以及你的HTML？ – Wavemaster

其工作正常http://jsfiddle.net/L28xgcLp/ –

自然它應該工作。給我們更多的信息，比如說wavemaster說的。 – Roi

您的代碼對我的作品在Chrome 44/Win 7的

div { 
 
    padding-top:1px; 
 
    padding-left:2px; 
 
    background: linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    background: -moz-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    background: -webkit-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    background: -ms-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    background: -o-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#B5B5B5, GradientType=1); 
 
    height: 245px; 
 
    padding-right: 30px !important; 
 
    border: 1px solid silver; 
 
    border-radius: 5px 
 
}

<div></div>

來源

2015-08-20 08:04:01 Wavemaster

您的代碼實際上是正確的。請參閱下面的代碼片段。

半徑不會顯示唯一的理由是：

您的瀏覽器不支持它。

（在這種情況下，下面的代碼在您查看時也不會出現問題）。

您覆蓋的border-radius其他地方在你的代碼。

.myDiv{ 
 
    padding-top:1px; 
 
    padding-left:2px; 
 
    background: linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    background: -moz-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    background: -webkit-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    background: -ms-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    background: -o-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#B5B5B5,GradientType=1); 
 
    height: 245px; 
 
    padding-right: 30px !important; 
 
    border: 1px solid silver; 
 
    border-radius: 5px; 
 
}

<div class="myDiv">HELLO</div>

測試

要確定是否另一種風格是您的覆蓋邊界半徑：

SET

border-radius: 5px !important;

如果您的邊框現在變圓了，那麼其他地方的樣式將被覆蓋。

注意：我不建議這作爲解決方案，只是作爲一種手段來確定問題。

來源

2015-08-20 08:05:16 Obsidian

我用firefox和chrome的開發工具檢查過它。在這兩個我都看不到任何CSS覆蓋我的邊界半徑。另外我在其他地方使用border-radius，它在那裏工作得很好。 –

@請參閱上面的筆記來測試它。 – Obsidian

嘗試這樣的：

.curve{ 
 
padding-top:1px; 
 
padding-left:2px; 
 
background: linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
background: -moz-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
background: -webkit-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
background: -ms-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
background: -o-linear-gradient(top, #ffffff 0%, #B5B5B5 100%, #eeeeee 100%); 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#B5B5B5,GradientType=1); 
 
height: 245px; 
 
padding-right: 30px !important; 
 
border: 1px solid #ccc; 
 
/* multiple browser support */ 
 
border-radius: 5px; 
 
-webkit-border-radius: 5px; 
 
-moz-border-radius: 5px; 
 
}

<div class="curve">Div Content</div>

來源

2015-08-20 08:10:34

CSS邊框半徑不適用於邊框div

回答

相關問題