是否可以使用没有设置宽度或高度的边界半径制作胶囊形状？
我希望左侧和右侧完全圆形，而胶囊沿其水平长度保持笔直。将半径设置为 50% 似乎并没有产生预期的效果。
【问题讨论】：
标签： css css-shapes
应用非常大的边框半径似乎适用于许多浏览器（IE9+、FF、Chrome），例如 David's fiddle http://jsfiddle.net/cthQW/1/ 的这个 mod
border-radius: 500px;
【讨论】：
是的，这是可能的（尽管我只在 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;
}
很明显，重要的信息是20%/50% 属性值； 20% 是半径的“水平长度”，而50% 是“垂直长度”；使用两种不同的测量值会为边界提供椭圆曲线，而不是单个测量值，从而产生更圆的半径。显然这需要根据自己的要求进行一定程度的调整
参考资料：
【讨论】：
border-radius 的问题（内容不一定“包含”在边界曲线内。但使用padding can help；或a child element, with a margin。
如果使用百分比，则需要元素宽度来计算半径。要拥有胶囊形元素，您需要传递给 border-radius 属性单元，例如 rem 或 px （我也不知道原因，但它有效） .这就是为什么它在通过 500px 时起作用的原因。如果需要，您可以对 line-height 和 border-radius 属性使用相同的值。
.capsule {
line-height: 48px;
border-radius: 48px;
}
这里有一个CodePen 中的示例。尝试更改变量$label-height 以查看在按钮高度发生变化时形状是如何保持的。
在本例中，您不需要设置元素的宽度或高度。只需调整内容的height和padding即可。
padding 属性对于设置内容和组件边框之间的分隔很有用。看看如果我只设置左边的填充，它会是什么样子。
如果你设置了容器的line-height属性，你会自动设置容器高度，同时将容器内的内容居中。
如果要将组件的宽度设置为组件的内容宽度，可以将组件的显示属性设置为inline-block，例如使用FlexBox将它们排列成一列。然后，将左右边距设置为自动，以避免元素增长到其父宽度。
如果你想在组件之间留一个空格，你可以在连续的组件之间设置margin-top属性。
.capsule + .capsule {
margin-top: 15px;
}
希望对你有帮助:)
【讨论】：
这可以使用 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>【讨论】：
这是我发现效果很好的方法：
border-radius: 50vh;
浏览器支持现在看起来也不错。
解释一下，vh 是一个“视口单元”，它以像素为单位计算视口的高度。通过说50vh来声明边界半径，就是50% * (Viewport Height)px。
【讨论】：
1000vh 更有可能适用于更大的元素。
50 没有什么魔力。