Question

我的CSS有问题。我将border-radius poperty添加到div元素。背景颜色显示圆角，因此这有效。但是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;

Answer 1

您的代码适用于Chrome 44 / Win 7

＆＃13;

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
}

＆＃13;

<div></div>

＆＃13;

Answer 2

您的代码实际上是正确的。请参阅下面的代码段。

半径不会显示的唯一原因是：

您的浏览器不支持它。

（在这种情况下，以下代码在您查看时似乎也不起作用。）

您覆盖代码中其他地方的border-radius。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

<强>测试

确定另一种样式是否覆盖了border-radius：

设置

border-radius: 5px !important;

如果您的边框现在已经四舍五入，那么其他地方的样式就会被覆盖。

注意： 我不建议将此作为解决方案，仅作为确定问题的方法。

Answer 3

试试这个：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

CSS border-radius不适用于div的边界

3 个答案: