CSS 边界半径不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10995294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
border-radius not working
提问by Matt
I'm working on a basic divand for some peculiar reason, border-radius: 7pxisn't applying to it.
我正在研究一个基本的div并且出于某些特殊原因，border-radius: 7px不适用于它。
.panel {
float: right;
width: 120px;
height: auto;
background: #fff;
border-radius: 7px; // not working
}
回答by Elijah Tate
To whomever may have this issue. My problem was border-collapse. It was set to:
谁可能有这个问题。我的问题是边界崩溃。它被设置为：
border-collapse: collapse;
I set it to:
我将其设置为：
border-collapse: separate;
and it fixed the issue.
它解决了这个问题。
回答by Ethan May
For anyone who comes across this issue in the future, I had to add
对于将来遇到此问题的任何人，我必须添加
perspective: 1px;
to the element that I was applying the border radius to. Final working code:
到我应用边框半径的元素。最终工作代码：
.ele-with-border-radius {
border-radius: 15px;
overflow: hidden;
perspective: 1px;
}
回答by jnotelddim
To add a bit on to @ethanmay 's answer: (https://stackoverflow.com/a/44334424/8479303)...
在@ethanmay 的回答中添加一点：（https://stackoverflow.com/a/44334424/8479303）...
If there are contents within the divthat has the curved corners, you have to set overflow: hiddenbecause otherwise the child div's overflow can give the impression that the border-radiusisn't working.
如果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/
JSFiddle：http: //jsfiddle.net/o2t68exj/
回答by jakee
For some reason your padding: 7px setting is nullifying the border-radius. Change it to padding: 0px 7px
出于某种原因，您的 padding: 7px 设置使边界半径无效。将其更改为padding: 0px 7px
回答by Usman
in your div class="social-box" css
在你的 div class="social-box" css 中
use
用
float:right
instead of
代替
float:left
回答by Baldráni
Im just highlighting part of @Ethan May answer which is
我只是强调@Ethan May 回答的一部分
overflow: hidden;
It would most probably do the work for your case.
它很可能会为您的案例完成工作。
回答by Alex Chamberlain
Your problem is unrelated to how you have set border-radius. Fire up Chrome and hit Ctrl+Shift+jand inspect the element. Uncheck widthand the border will have curved corners.
您的问题与您设置的方式无关border-radius。启动 Chrome 并点击Ctrl+Shift+j并检查元素。取消选中width，边框将具有弯曲的角。
回答by Rohit Azad
Now I am using the browser kit like this:
现在我正在使用这样的浏览器套件：
{
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
回答by syadiqfaliq
Try add !importantto your css. Its working for me.
尝试将!important添加到您的 css 中。它为我工作。
.panel {
float: right;
width: 120px;
height: auto;
background: #fff;
border-radius: 7px!important;
}
回答by Muntadar Muhammad
you may include bootstrap to your html file and you put it under the style file so if you do that bootstrap file will override the style file briefly like this
您可以将引导程序包含到您的 html 文件中，并将其放在样式文件下，因此如果您这样做，引导程序文件将像这样简单地覆盖样式文件
// style file
<link rel="stylesheet" href="css/style.css" />
// bootstrap file
<link rel="stylesheet" href="css/bootstrap.min.css" />
the right way is this
正确的方法是这样
// bootstrap file
<link rel="stylesheet" href="css/bootstrap.min.css" />
// style file
<link rel="stylesheet" href="css/style.css" />
