88

是否可以使用没有设置宽度或高度的边界半径制作胶囊形状？

我希望左侧和右侧完全变圆，而胶囊沿其水平长度保持笔直。将半径设置为 50% 似乎并没有产生预期的效果。

胶囊形状

4

5 回答 5

136

应用非常大的边框半径似乎适用于许多浏览器（IE9+、FF、Chrome），例如大卫小提琴的这个 mod http://jsfiddle.net/cthQW/1/

border-radius: 500px;
于 2013-09-13T21:00:21.590 回答
23

是的，这是可能的（尽管我只在 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;
}

JS 小提琴演示。

很明显，重要的信息是20%/50%财产价值。the20%是半径的“水平长度”，而 the50%是“垂直长度”；使用两个不同的测量值会为边界提供椭圆曲线，而不是单个测量值，从而产生更圆的半径。显然这需要对自己的要求进行一定的调整

参考：

于 2013-09-13T20:49:15.433 回答
7

如果使用百分比，则需要元素宽度来计算半径。要拥有胶囊形元素，您需要传递给诸如rem或pxborder-radius之类的属性单位（我也不知道这是为什么，但它确实有效）。这就是为什么它在传递500px时起作用的原因。如果需要，可以对和属性使用相同的值。line-heightborder-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;
}

希望能帮助到你 ：）

于 2015-09-04T14:32:30.400 回答
1

这可以使用 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>

于 2019-12-09T09:48:11.660 回答
-2

这是我发现效果很好的方法：

border-radius: 50vh;

浏览器支持现在看起来也不错。

解释一下，这vh是一个“视口单元”，它以像素为单位计算视口的高度。通过说50vh声明边界半径，它是50% * (Viewport Height)px。

于 2016-08-22T20:46:53.600 回答