Question

当我在模式div（在我的常规内容上方弹出的div）上使用border-radius属性时，四个角不会全部自身变圆。 一个或两个角将变圆，但不是全部四个。

这是图像的链接，我还不能在堆栈溢出中发布图像 （请注意图像的左上角） https://raw.githubusercontent.com/Randall-Coding/misc/master/border_round_err.png

我尝试使用所有不同的跨浏览器属性进行边界取整

  -moz-border-radius: 20px;   /* Also tried 20px 20px  */
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;

这是我使用mixin的CSS代码（请注意，无论是否使用mixin，它看起来都一样）。

div.contact_window{
    background-color: white;
    /*border-radius: 20px 20px;  */  /*other way I have tried it */
    -moz-border-radius: 20px;   /* Also tried 20px 20px  */
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
    border: 3px solid black;
    position:absolute;
    width: 60%;
    min-width:700px;
    max-width:800px;
    height: 520px;
    overflow:scroll;
    left:20%;
    top: 130px;
    z-index:10;
    display: none;
    display: block; /*DEBUG */
}

div.mask{
  background-color: black;
  opacity: 0.6;
  position:fixed;
  height:100%;
  width: 100%;
  z-index: 1;
  top: 0px;
  left: 0px;
  display:none;
  display:block; /*DEBUG */
}

HTML代码如下

    <div class="contact_window" id='#contact_window'>
        <%= render 'contact' %>
    </div> <!-- end div.contact_form -->

    <div class="mask">

我正在顺利处理其他div的问题。

所以我想知道是否有人遇到过这个问题和/或知道这里发生了什么？

*我正在使用Firefox，但在我的Chromium浏览器中也是如此。我的操作系统是Ubuntu Linux 18.04。

*这里是SCSS和HTML文件的链接。
HTML https://github.com/Randall-Coding/misc/raw/master/index.html

CSS（SCSS）https://github.com/Randall-Coding/misc/raw/master/main.scss

edit *当我检查元素时，它仍然显示border-radius：20px

Answer 1

您是否试图通过直接传递边界半径来实现没有混合的舍入？

除非打算单独更改每个角的半径，否则最好只将一个值传递给将应用于每个角的边框半径。可以这样做：

border-radius: 20px;

代替：

border-radius: 20px 20px;

尝试以此作为您的混合（更清晰的命名）：

@mixin border-radius($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

并传递一个值

@include border-radius(20px);

Answer 2

好吧，我按属性细分了此属性，结果发现问题出在设置

overflow:scroll

这会强制窗口在滚动条所在的位置具有尖角。

所以答案是从CSS中删除overflow:scroll

Answer 3

以％的百分比尝试边界半径

border-radius:100%;

CSS边框半径仅在模态div窗口的一个角处变圆

3 个答案: