border-radius不工作

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

我只是强调@Ethan May 回答的一部分

overflow: hidden;

它很可能会为您的案例完成工作。

Answer 4

如果你有父元素，那么你的父元素必须有溢出：隐藏；属性，因为如果您的子内容从父边框溢出，则您的边框将可见。否则您的 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>

Answer 5

要在@ethanmay的答案上加一点：（/sf/answers/3103409711/）...

如果div中的某些内容具有弯曲的角，则必须进行设置，overflow: hidden因为否则子div的溢出会给人印象，即border-radiusd不能正常工作。

<!-- 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/

Answer 6

尝试添加!important到你的 css 中。它对我有用。

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

Answer 7

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

Answer 8

在你的div class ="social-box"css中

使用

            float:right 

代替

             float:left