登陆界面html外框圆角,关于html：CSS边框半径仅圆角模态div窗口的一个角

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

这是图像的链接，我还不能在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尽力而为。

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

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

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

检查时会看到什么？ 边界半径是否被其他东西覆盖？

检查显示border-radius：20px(这就是我现在使用的)。 它没有被划掉。 我在下面对Josh的评论中发布了CSS和HTML的源文件。

我的猜测是骑车时有些过头，但是如果不划掉它，会有些混乱，当您进入检查器时，是否可以手动用CSS强制拐角？

罗克韦尔(Rockwell)我认为您误解了这种情况，已经有一个圆角(参见图片链接)。 拐角应全部倒圆，而不仅仅是左上角

我不知道该如何改变其他三个整数。 该属性已添加。 我现在将源文件发布在答案的底部(编辑)

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

overflow:scroll

这迫使窗口在滚动条所在的位置上具有尖角。

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

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

除非打算单独更改每个角的半径，否则最好只将一个值传递给将应用于每个角的边框半径。 这可以通过执行以下操作来完成：

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);

那就是我最初尝试的方式。 我应该在问题中包括这一点。 我尝试了不使用mixin并使用单个值的情况。 再试一次，仍然只有一个角。 *也只是使用mixin和单个值进行了尝试，结果相同

然后，您必须具有一些覆盖样式的现有CSS类。 将您的整个代码上传到jsfiddle.net，然后我可能会提供帮助。

我将链接添加到问题的底部。 样式表将需要链接或仅放在标签之间。 样式表是scss

尝试以％表示边界半径

border-radius:100%;