CSS 使用边界半径而不设置宽度或高度的胶囊形状？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18794947/
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
Capsule shape using border-radius without a set width or height?
提问by christian
Is it possible to make a capsule shape using border-radius without a set width or height?
是否可以在没有设置宽度或高度的情况下使用边界半径制作胶囊形状？
I want the left and right sides to be completely rounded while the capsule would remain straight along it's horizontal length. Setting the radius to 50% doesn't seem to give the desired affect.
我希望左侧和右侧完全圆形，而胶囊将沿其水平长度保持笔直。将半径设置为 50% 似乎没有达到预期的效果。
回答by Jeremy Cook
Applying a very large border radius seems to work on many browsers (IE9+, FF, Chrome) like this mod of David's fiddle http://jsfiddle.net/cthQW/1/
应用非常大的边框半径似乎适用于许多浏览器（IE9+、FF、Chrome），例如 David 的小提琴http://jsfiddle.net/cthQW/1/
border-radius: 500px;
回答by David says reinstate Monica
Yes, this is possible (albeit I've only tested in Chromium 28/Ubuntu 12.10):
是的，这是可能的（尽管我只在 Chromium 28/Ubuntu 12.10 中测试过）：
div {
/* this is the only relevant part: */
border-radius: 20%/50%;
/* this is irrelevant, and just so the element can be visualised/displayed: */
width: 50%;
height: 5em;
margin: 2em auto;
background-color: #000;
}
The important information is, obviously, the 20%/50%property-value; the 20%is the 'horizontal length' of the radius, whereas the 50%is the 'vertical length'; using two different measurements gives an elliptical curve to the border, instead of a single measurement, which yields the more circular radius. Obviously this requires a certain amount of adjustment to your own requirements
重要的信息显然是20%/50%财产价值；的20%是半径的“水平长度”，而50%是“垂直长度”; 使用两个不同的测量值会为边界提供一条椭圆曲线，而不是单个测量值，从而产生更大的圆形半径。显然这需要根据自己的要求进行一定的调整
References:
参考：
回答by Timbergus
If you use percentages, it takes the element width to calculate the radius. To have the capsule-shaped element, you need to pass to the border-radiusproperty units like remor px(neither I know the reason for this, but it works). This is why it works when passing 500px. You can use the same value for line-heightand border-radiusproperties if you want.
如果使用百分比，则需要元素宽度来计算半径。要拥有胶囊形元素，您需要传递给border-radius属性单位，如rem或px（我都不知道这样做的原因，但它有效）。这就是它在传递500px时起作用的原因。如果需要，您可以对line-height和border-radius属性使用相同的值。
.capsule {
line-height: 48px;
border-radius: 48px;
}
Here you have an example in CodePen. Try to change the variable $label-heightto see how the shape is maintained while the height of the button changes.
这里有一个CodePen示例。尝试更改变量$label-height以查看在按钮高度更改时如何保持形状。
In this example, you don't need to set the width or height of the element. You just need to adjust the content's heightand padding.
在这个例子中，你不需要设置元素的宽度或高度。您只需要调整内容的height和padding。
The padding property is useful to set a separation between the contents and the component border. See how it looks if I only set the left padding.
padding 属性可用于设置内容和组件边框之间的分隔。如果我只设置左填充，看看它看起来如何。
If you set the line-heightproperty of the container, you will set automatically the container height, and center the content inside the container at the same time.
如果设置了line-height容器的属性，会自动设置容器的高度，同时将容器内的内容居中。
If you want to set the component's width to the component's content width, you can set the component's display property to inline-block, and use FlexBox to arrange them in a column, for example. And then, set the left and right margins to auto, to avoid the element to grow to its parent width.
例如，如果要将组件的宽度设置为组件的内容宽度，则可以将组件的 display 属性设置为inline-block，并使用 FlexBox 将它们排列在一列中。然后，将左右边距设置为自动，以避免元素增长到其父宽度。
And if you want to leave a space between the components, you can set the margin-topproperty between consecutive components.
并且如果要在组件之间留出空间，可以设置margin-top连续组件之间的属性。
.capsule + .capsule {
margin-top: 15px;
}
Hope it helps :)
希望能帮助到你 ：）
回答by Nathan Powell
This is what I have found to work well:
这是我发现效果很好的方法：
border-radius: 50vh;
border-radius: 50vh;
Browser support looks good for that now too.
浏览器支持现在看起来也不错。
To explain, the vhis a "Viewport Unit" that computes the heightof the viewport in pixels. By saying 50vhto declare the border radius, it is 50% * (Viewport Height)px.
解释一下，这vh是一个“视口单位”，它以像素为单位计算视口的高度。通过说50vh要声明边界半径，它是50% * (Viewport Height)px。
回答by Charan Ghate
This can be easily achieved using HTML Span. You have to just set the background-color and border-radius.
这可以使用 HTML Span 轻松实现。您只需设置背景颜色和边框半径。
span {
background-color: #30bb36;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
}<!DOCTYPE html>
<html>
<body>
<p>Set a <span>Background Color</span> for only a part of a text.</p>
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</body>
</html>