76

我正在做一个基本的工作div，出于某种特殊的原因，我border-radius: 7px没有申请它。

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

12 回答 12

88

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

border-collapse: collapse;

我将其设置为：

border-collapse: separate;

它解决了这个问题。

于 2015-06-01T22:47:04.303 回答
50

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

perspective: 1px;

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

.ele-with-border-radius {
    border-radius: 15px;
    overflow: hidden;
    perspective: 1px;
}
于 2017-06-02T17:28:45.567 回答
40

在@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/

于 2018-12-28T22:20:34.133 回答
26

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

overflow: hidden;

它很可能会为您的情况完成工作。

于 2019-07-25T08:48:52.997 回答
8

出于某种原因，您的 padding: 7px 设置使边界半径无效。将其更改为padding: 0px 7px

于 2012-06-12T11:01:26.760 回答
7

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

采用

            float:right

代替

             float:left
于 2012-06-12T11:02:47.830 回答
5

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

.panel {
  float: right;
  width: 120px;
  height: auto;
  background: #fff;
  border-radius: 7px!important;
}
于 2018-01-11T04:58:41.343 回答
3

如果你有父元素，那么你的父元素必须有溢出：隐藏；属性，因为如果您的子内容从父边框溢出，则您的边框将可见。否则您的边框半径正在工作，但它被您的子内容隐藏。

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

于 2021-01-15T18:06:02.607 回答
2

现在我正在使用这样的浏览器工具包：

{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
于 2012-06-12T11:00:41.690 回答
2

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

于 2012-06-12T11:15:24.417 回答
1

对于我的情况，我的 div 容器中有一个下拉列表，所以我不能使用overflow: hidden或者我的下拉列表将被隐藏。

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

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

在此处输入图像描述

于 2020-02-20T03:38:31.133 回答
0

您可以将引导程序包含到您的 html 文件中，并将其放在样式文件下，因此如果您这样做，该引导程序文件将像这样简要地覆盖样式文件

     // 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" />
于 2019-01-01T12:32:28.347 回答