html - CSS border-radius 仅围绕模态 div 窗口的一个 Angular

Question

当我在模态 div(在我的正常内容上弹出的 div)上使用 border-radius 属性时，四个 Angular 并不都是圆的。 一个或两个 Angular 会变圆，但不是所有四个。

这是图片的链接，我还不能在 Stack Overflow 上发布图片 (注意图片的左上角) 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 的 Angular 落，没有任何问题。

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

*我使用的是 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

您是否尝试通过简单地直接传递边界半径来实现不使用 mixin 的舍入？

除非您打算单独更改每个 Angular 的半径，否则最好只将一个值传递给将应用于每个 Angular 的 border-radius。这可以通过以下方式完成:

border-radius: 20px;

代替:

border-radius: 20px 20px;

试试这个作为你的 mixin(更清晰的命名):

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

并传递一个值

@include border-radius(20px);