邊界半徑不起作用

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

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

Answer 4

我只是強調@Ethan May 回答的一部分

overflow: hidden;

它很可能會為您的案例完成工作。

Answer 5

出於某種原因，您的 padding: 7px 設置使邊界半徑無效。 將其更改為padding: 0px 7px

Answer 6

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

采用

            float:right 

代替

             float:left

Answer 7

現在我正在使用這樣的瀏覽器套件：

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

Answer 8

您的問題與您如何設置border-radius無關。 啟動 Chrome 並按Ctrl+Shift+j並檢查元素。 取消選中width ，邊框將具有彎曲的角。

Answer 9

嘗試將!important添加到您的 css 中。 它為我工作。

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

Answer 10

如果你有父元素，那么你的父元素必須有溢出：隱藏； 屬性，因為如果您的孩子的內容從父邊界溢出，那么您的邊界將是可見的。否則您的 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 11

您可以將引導程序包含到您的 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" />

Answer 12

就我而言，我的 div 容器中有一個下拉列表，所以我不能使用overflow: hidden或我的下拉列表將被隱藏。

受此討論的啟發： https : //twitter.com/siddharthkp/status/1094821277452234752我在子元素中使用border-bottom-left-radius和border-bottom-right-radius來解決這個問題。

確保為每個孩子分別添加正確的值

Answer 13

我必須添加display: block在我的情況下才能使其工作，重要的部分是 display 不能內聯； 所以該元素具有以下內容：

overflow: hidden;
display: flex;
border-radius: 0.5rem;

（注意：它也適用於display: block ）

參考參考： https://developer.mozilla.org/en-US/docs/Web/CSS/overflow