使用边框半径的胶囊形状，没有设置宽度或高度？

问题描述 投票：0回答：6

是否可以使用边框半径制作胶囊形状，而无需设置宽度或高度？

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

Capsule Shape

css css-shapes
6个回答
159
投票

应用非常大的边框半径似乎适用于许多浏览器（IE9+、FF、Chrome），就像 David's fiddle 的这个 mod http://jsfiddle.net/cthQW/1/

border-radius: 500px;
28
投票

是的，这是可能的（尽管我只在 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 Fiddle 演示.

重要的信息显然是 

20%/50%
属性值； 
20%
是半径的“水平长度”，而 
50%
是“垂直长度”；使用两种不同的测量结果可以为边界提供椭圆曲线，而不是单一测量结果，从而产生更圆的半径。显然这需要根据自己的要求进行一定的调整

参考资料：

8
投票

如果使用百分比，则需要元素宽度来计算半径。要拥有胶囊形状的元素，您需要传递给 

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 将它们排列在列中。然后，将左右边距设置为auto，以避免元素增长到其父级宽度。

如果想在组件之间留出空间，可以在连续组件之间设置 

margin-top
属性。

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

希望有帮助:)

2
投票

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

0
投票

要获得胶囊形状，您可以将边框半径设置为元素的高度。

那么如果

height: 5rem;

比设定

border-radius: 5rem;

还有

-3
投票

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

border-radius: 50vh;

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

解释一下，

vh
是一个“视口单位”，用于计算视口的高度（以像素为单位）。通过说
50vh
来声明边界半径，它是
50% * (Viewport Height)px
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.