Question

我正在处理一个基本的div，由于一些特殊的原因，border-radius: 7px不适用于它。

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px; // not working
}

Answer 1

对任何人都有这个问题。我的问题是边界崩溃。它被设置为：

border-collapse: collapse;

我将其设置为：

border-collapse: separate;

它解决了这个问题。

Answer 2

对于将来遇到此问题的任何人，我必须添加

perspective: 1px;

到我应用边框半径的元素。最终工作代码：

.ele-with-border-radius {
    border-radius: 15px;
    overflow: hidden;
    perspective: 1px;
}

Answer 3

在你的div class =“social-box”css

中

使用

            float:right

而不是

             float:left

答案 3 :(得分：5)

由于某种原因你的填充：7px设置使border-radius无效。将其更改为padding: 0px 7px

答案 4 :(得分：5)

要在@ethanmay的答案上加一点：（https://stackoverflow.com/a/44334424/8479303）...

如果div中有个内容具有弯曲的角，则必须设置overflow: hidden，因为否则子div的溢出会给人border-radius没有工作。

<!-- This will look like the border-radius isn't working-->
<div style="border: 1px solid black; border-radius: 10px;">
  <div style="background: red;">
      text!
  </div>
</div>

<!-- but here the contents properly fit within the rounded div -->
<div style="border: 1px solid black; border-radius: 10px; overflow: hidden;">
  <div style="background: red;">
      text!
  </div>
</div>

JSFiddle： http://jsfiddle.net/o2t68exj/

答案 5 :(得分：1)

现在我正在使用这样的浏览器套件：

{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}

答案 6 :(得分：1)

您的问题与设置border-radius的方式无关。启动Chrome并点击Ctrl+Shift+j并检查该元素。取消选中width，边框将有弯角。

答案 7 :(得分：0)

尝试将！important 添加到您的CSS。它为我工作。

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px!important;
}

答案 8 :(得分：0)

我只是突出显示@Ethan May答案的一部分

    overflow: hidden;

这很可能会为您的案件做事。

答案 9 :(得分：0)

对于我来说，我的div容器中有一个下拉列表，所以我不能使用overflow: hidden，否则我的下拉列表将被隐藏。

受此讨论的启发：https://twitter.com/siddharthkp/status/1094821277452234752 我在子元素中使用border-bottom-left-radius和border-bottom-right-radius来解决此问题。

确保分别为每个孩子添加正确的值

答案 10 :(得分：0)

如果你有父元素，那么你的父元素必须有 overflow: hidden;财产因为如果您的孩子的内容从父边界溢出，那么您的边界将是可见的。否则您的 borderradius 正在工作，但它会被您的孩子的内容隐藏。

.outer {
  width: 200px;
  height: 120px;
  border: 1px solid black;
  margin-left: 50px;
  overflow: hidden;
  border-radius: 30px;
}
.inner1 {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#FF9933,white, green);
  border: 1px solid black;
}

<div class="outer">
  <div class="inner1">
     
  </div>
</div>

答案 11 :(得分：-1)

您可以将bootstrap包含到html文件中，并将其放在样式文件下，因此，如果这样做，bootstrap文件将像这样短暂地覆盖样式文件

     // style file
     <link rel="stylesheet" href="css/style.css" />
     // bootstrap file
     <link rel="stylesheet" href="css/bootstrap.min.css" />

正确的方法是

    // bootstrap file
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    // style file
    <link rel="stylesheet" href="css/style.css" />

Answer 4