使用border-radius而没有设置宽度或高度的胶囊形状？
chr*_*ian 50 css css3 css-shapes
是否可以使用没有设定宽度或高度的边界半径制作胶囊形状？
我希望左右两侧完全圆润,而胶囊沿着它的水平长度保持笔直.将半径设置为50%似乎不会产生预期的效果.
Jer*_*ook 86
应用非常大的边框半径似乎适用于许多浏览器(IE9 +,FF,Chrome),就像大卫的小提琴http://jsfiddle.net/cthQW/1/
border-radius: 500px;
- 这可能是答案吗？[拐角曲线不得重叠:当任意两个相邻边界半径的总和超过边框的大小时,UAs必须按比例减少所有边界半径的使用值,直到它们都不重叠.](http://dev.w3 .ORG/csswg/CSS-背景/#角落重叠) (14认同)
- 为什么这样可行,但很大一部分不起作用？ (7认同)
- @CaldwellYSR我假设在使用百分比时,垂直半径是根据元素高度计算的,水平半径是根据元素宽度计算的.而固定单位不会以这种方式变化.这是一个[border-radius fiddle](http://jsfiddle.net/5qBSb/30/),可视化固定单位和百分比之间的差异. (2认同)
Dav*_*mas 16
是的,这是可能的(尽管我只在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属性单位，如rem或px（我都不知道这样做的原因，但它有效）。这就是它在传递500px时起作用的原因。如果需要，您可以对line-height和border-radius属性使用相同的值。
.capsule {
line-height: 48px;
border-radius: 48px;
}
这里有一个CodePen示例。尝试更改变量$label-height以查看在按钮高度更改时如何保持形状。
在这个例子中，你不需要设置元素的宽度或高度。您只需要调整内容的height和padding。
padding 属性可用于设置内容和组件边框之间的分隔。如果我只设置左填充，看看它看起来如何。
如果设置了line-height容器的属性，会自动设置容器的高度，同时将容器内的内容居中。
例如，如果要将组件的宽度设置为组件的内容宽度，则可以将组件的 display 属性设置为inline-block，并使用 FlexBox 将它们排列在列中。然后，将左右边距设置为自动，以避免元素增长到其父宽度。
并且如果你想在组件之间留一个空间，你可以设置margin-top连续组件之间的属性。
.capsule + .capsule {
margin-top: 15px;
}
希望能帮助到你 ：）