CSS 边框半径仅围绕模态 div 窗口的一个角答案

【问题标题】：CSS border-radius only rounds one corner of modal div windowCSS 边框半径仅围绕模态 div 窗口的一个角
【发布时间】：2019-05-27 02:51:49
【问题描述】：

当我在模态 div（在我的正常内容上弹出的 div）上使用border-radius 属性时，四个角不会全部环绕自己。 一个或两个角会变圆，但不是全部四个。

这是图片的链接，我还不能在 Stack Overflow 上发布图片 （注意图片的左上角） https://raw.githubusercontent.com/Randall-Coding/misc/master/border_round_err.png p>

我已经尝试使用所有不同的跨浏览器属性进行边框舍入

  -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 文件的链接。
HTMLhttps://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

【问题讨论】：

您在检查时看到了什么？边界半径是否被其他东西覆盖？
检查显示border-radius:20px（这就是我现在使用的）。它没有被划掉。我在下面对 Josh 的评论中发布了 CSS 和 HTML 的源文件。
我的猜测是骑过它，但如果它没有被划掉它有点混乱，你可以在检查器中手动强制使用 css 圆角吗？
Rockwell 我想你误解了情况，已经有一个圆角（见图片链接）。各个角都应该是圆的，而不仅仅是左上角
我不知道我可以改变什么来四舍五入其他三个。该属性已添加。我现在在答案底部发布了源文件（编辑）

标签： html ruby-on-rails css sass

【解决方案1】：

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

除非您打算单独更改每个角的半径，否则最好只将一个值传递给将应用于每个角的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);

【讨论】：

这就是我最初尝试的方式。我应该把它包括在问题中。我在没有 mixin 并使用单个值的情况下尝试了它。刚刚又试了一次，还是只圆了一角。 *也只是尝试使用 mixin 和单个值，结果相同
那么你必须有一些覆盖样式的现有 CSS 类。将您的整个代码上传到jsfiddle.net，然后我可能会提供帮助。
我将链接添加到问题的底部。样式表需要被链接或者只是放在

【解决方案2】：

好的，我按属性分解了这个属性，结果发现问题出在设置上

overflow:scroll

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

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

【讨论】：

【解决方案3】：

试试 % like 中的边界半径

border-radius:100%;

【讨论】：