【问题标题】:border-radius not working边界半径不起作用
【发布时间】:2012-06-15 06:06:47
【问题描述】:

我正在研究基本的div,但由于某些特殊原因,border-radius: 7px 不适用于它。

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

【问题讨论】:

标签: css border


【解决方案1】:

致任何可能遇到此问题的人。我的问题是边界崩溃。设置为:

border-collapse: collapse;

我设置为:

border-collapse: separate; 

它解决了这个问题。

【讨论】:

  • 我刚刚添加了“border-collapse:separate;”到我的内联 CSS 并且它起作用了!谢谢!
  • 对这篇文章的更新迟到表示歉意。阅读 W3C 上的边框折叠规范后,可以确认这是语义上的正确答案,并且似乎具有不错的跨浏览器兼容性
  • 当我设置边框折叠以将其从所有 元素中删除时。
  • 我过去也遇到过类似的问题,因为其他 CSS 不应该设置,然后更正一个显示另一个错误。如果您创建了一个 codepen 或其他东西,就会更容易看出可能是什么问题。
【解决方案2】:

对于以后遇到这个问题的人,我不得不补充

perspective: 1px;

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

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

【讨论】:

  • overflow: hidden 属性适用于大多数容器。
  • 溢出:隐藏,FTW
  • 透视??好吧很奇怪!
  • 我很想有人解释为什么这对我有用。 99.999% 的时间你只需要溢出:隐藏在容器上,但有时这根本行不通。这很奇怪。
  • 我尝试了上面的边框折叠但没有奏效 - 但这些(溢出和透视)也让它对我有用。谢谢!
【解决方案3】:

补充一点@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/

【讨论】:

  • 这个答案对我有用。其他人都没有。具体来说,我正在使用嵌套的
    • 标签。
【解决方案4】:

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

overflow: hidden;

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

【讨论】:

    【解决方案5】:

    由于某种原因,您的 padding: 7px 设置使边界半径无效。改成padding: 0px 7px

    【讨论】:

    • 谢谢。是框应用了border-radius成功,但是因为有padding,看不到。
    【解决方案6】:

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

    使用

                float:right 
    

    而不是

                 float:left
    

    【讨论】:

    • 为什么?这与提出的问题无关。
    • border-radius 已成功应用于该 div,但未正确浮动..
    • 这不能在 Chrome 上修复它。
    • @Alex..我不知道您使用的是哪个版本的 chrome..但它在 Chrome 19.0.1084.56、FF 13.0 上对我来说很好用
    • 我尝试在浏览器中设置float: initial,解决了我的问题。然后我注意到,删除该属性后它也可以工作,我认为在我的情况下浏览器中的问题:Chrome 版本 55.0.2883.87(64 位)
    【解决方案7】:

    尝试将 !important 添加到您的 CSS。它对我有用。

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

    【讨论】:

    • 我的问题是其他地方有 !important 所以它踩到了我的属性
    【解决方案8】:

    如果你有父元素而不是你的父元素必须有溢出:隐藏;财产 因为如果您的子内容从父边框溢出,则您的边框将可见。否则您的边框半径正在工作,但它被您的子内容隐藏。

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

    【讨论】:

      【解决方案9】:

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

      【讨论】:

        【解决方案10】:

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

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

        【讨论】:

        • 你试过了吗?它没有解决这个特殊的问题。
        【解决方案11】:

        就我而言,我的 div 容器中有一个下拉列表,所以我不能使用 overflow: hidden 否则我的下拉列表将被隐藏。

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

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

        【讨论】:

        • 我遇到了同样的问题,position: absolute 容器切割下拉列表,因为我的容器需要一个 overflow: hidden 才能有一个工作 border-radius。我删除了overflow: hidden,并按照建议在每个角元素上应用了选择性边框半径。非常适合我。
        【解决方案12】:

        您可以在 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" />
        

        【讨论】:

        • 包含 Bootstrap 不是一个有效的答案。您建议用户通过添加用户需要下载的 34kb 资源来解决此问题。
        • @Matt 我认为他的意思是如果你使用引导程序,它可能无法工作,因为你的样式会被引导程序覆盖,因为导入顺序
        猜你喜欢
        相关资源
        最近更新 更多
        热门标签