问胶囊形状使用边界半径没有固定的宽度或高度？

EN

在许多浏览器(IE9+、FF、Chrome)上使用非常大的边框半径似乎是可行的，比如大卫的小提琴http://jsfiddle.net/cthQW/1/模式

border-radius: 500px;

是的，这是可能的(尽管我只在Chromium28/Ubuntu12.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;
}

JS Fiddle演示。

很明显，重要的信息是20%/50%属性值；20%是半径的“水平长度”，而50%是“垂直长度”；使用两种不同的测量方法给出了一条向边界的椭圆曲线，而不是一次测量，从而产生了更圆的半径。显然，这需要对您自己的需求进行一定程度的调整。

参考文献：

• border-radius (at Mozilla开发人员网络)。
• CSS背景和边界模块3级: 5.1。曲线半径：“边界半径”属性。

如果使用百分比，则使用元素宽度来计算半径。要获得胶囊状元素，您需要传递给border-radius属性单元，如rem或px (我不知道原因，但它有效)。这就是它在传递500 is 时工作的原因。如果需要，可以对line-height和border-radius属性使用相同的值。

.capsule {
    line-height: 48px;
    border-radius: 48px;
}

这里有一个CodePen的例子。尝试更改变量$label-height，以查看按钮高度变化时形状是如何保持的。

在本例中，不需要设置元素的宽度或高度。您只需调整内容的height和padding即可。

填充属性对于设置内容和组件边框之间的分隔非常有用。如果我只设置左边的垫子，看它是什么样子。

​

​

如果设置容器的line-height属性，则将自动设置容器高度，并同时将内容集中在容器内。

如果要将组件的宽度设置为组件的内容宽度，可以将组件的显示属性设置为inline-block，并使用FlexBox将其安排在列中。然后，将左右边距设置为auto，以避免元素增长到其父宽度。

​

​

如果要在组件之间留出空间，则可以在连续组件之间设置margin-top属性。

.capsule + .capsule {
    margin-top: 15px;
}

希望它有帮助:)