Html 边框半径圆
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32199369/
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 circle
提问by Corentin Branquet
I've this code :
我有这个代码：
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
}<span>
<p>25</p>
<p>08</p>
</span>I want to make a perfect circle on my span. I try a border-radius: 50%;but it does not work.
我想在我的跨度上做一个完美的圆圈。我尝试了border-radius: 50%;但它不起作用。
Thanks for the help !
谢谢您的帮助 ！
回答by GolezTrol
You can do this by giving the span a fixed width and height:
你可以通过给跨度一个固定的宽度和高度来做到这一点：
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}<span>
<p>25</p>
<p>08</p>
</span>回答by HoomanMns
add line-heightand width:
添加line-height和width：
span {
background-color: #F00;
display: inline-block;
border-radius: 50%;
width: 50px;
line-height: 25px;
text-align: center;
}
回答by Eric Mitjans
You need a predefined width and height on the span to be able to make it round.
您需要在跨度上预定义的宽度和高度才能使其变圆。
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width:40px;
height:40px;
padding-left:10px;
box-sizing: border-box;
}<span>
<p>25</p>
<p>08</p>
</span>回答by Amit singh
Use this code. HTML:
使用此代码。HTML：
<span>
<p>25</p>
</span>
<span>
<p>08</p>
</span>
CSS:
CSS：
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
回答by robjez
It looks like you incorrectly nested paragraphelements inside of span, which is against HTML5 spec, as spanis being defined there as an element, which Content Modelis described as Phrasing Content, and that:
看起来您在 中错误地嵌套了paragraph元素span，这违反了HTML5 规范，因为span在那里被定义为一个元素，内容模型被描述为短语内容，并且：
Most elements that are categorized as Phrasing Contentcan only contain elements that are themselves categorized as phrasing content, not any flow content.
被归类为大多数元素段落式内容只能包含在自己归类为段落式内容，没有任何流量的内容元素。
And because paragraphelement doesn't belong to Phrasing Contentlist, you can use divinstead of spanfor this purpose, only if you care to be semantically correct.
并且因为paragraph元素不属于短语内容列表，所以您可以使用div代替span用于此目的，仅当您关心语义正确时。
So coming back to your problem, it can be rewritten as so:
所以回到你的问题，它可以改写为：
HTML:
HTML：
<div>
<p>25</p>
<p>08</p>
</div>
CSS:
CSS：
p {
margin: 0;
text-align:center;
}
div {
background-color: red;
display: inline-block;
border-radius: 50%;
width:50px;
height:50px;
line-height:25px;
}
Where general rule for achieving the circle by using border radiusset to 50%, is that you need to make sure that content of such element has the same width and height. You can get that by fixing these values in your css.
使用border radiusset to实现圆的一般规则50%是，您需要确保此类元素的内容具有相同的宽度和高度。您可以通过在css.
Here is JsFiddlepresenting that.
这是JsFiddle介绍的。
回答by Ilya Degtyarenko
border-radius: 50% and padding
边界半径：50% 和填充
document.addEventListener('DOMContentLoaded', () => {
let el = document.querySelector('#wrapper .container');
setTimeout(() => (el.style.marginTop = '20px'), 500);
}, false);#wrapper {
display: flex;
justify-content: center;
}
#wrapper .container {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 16px;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
border-radius: 50%;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
transition: margin-top 650ms ease-out, box-shadow 120ms, transform 120ms;
will-change: margin-top, box-shadow, transform;
user-select: none;
cursor: pointer;
}
#wrapper .container:hover:not(:active) {
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.1),
0 2px 10px 0px rgba(0, 0, 0, 0.08),
0 0px 10px 0px rgba(0, 0, 0, 0.08);
}
#wrapper .container:active {
transform: scale(1.4) translateY(5px);
box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2),
0 18px 28px 2px rgba(0, 0,0 , 0.14),
0 7px 34px 6px rgba(0, 0, 0, 0.12);
}<div id="wrapper">
<div class="container">
<span>10</span>
<span>3</span>
</div>
</div>