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

回答

相关问题