使用border-radius而没有设置宽度或高度的胶囊形状？

Question

是否可以使用没有设定宽度或高度的border-radius制作胶囊形状？

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

Answer 1

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

border-radius: 500px;

Answer 2

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

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

参考文献：

• border-radius（Mozilla Developer Network）。
• CSS Backgrounds and Borders Module Level 3: 5.1. Curve Radii: the ‘border-radius’ properties。

Answer 3

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

border-radius: 50vh;

浏览器支持现在看起来也很好。

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

Answer 4

如果使用百分比，则需要元素宽度来计算半径，因此，要获得像素形元素，需要传递给{{1使用单位的元素高度的一半属性。这就是当你传递 500px 时它正在工作的原因。不是因为金额，而是因为您使用 px 作为单位。

border-radius

这里有CodePen中的示例。尝试使用变量.capsule { width : 200px; height : 50px; border-radius : 25px; } 来查看对元素半径的影响。

希望有所帮助：）

Answer 5

使用HTML Span可以轻松实现。您只需设置背景颜色和边框半径。

                List<Details> employeeList = Arrays.asList(new Details("Pratik", "Developer"), new Details("Rohit", "Manager"), new Details("Sonal", "Developer"), new Details("Sagar", "Lead"), new Details("Sanket", "Lead"));       

                Map<String, List<Details>> collect = employeeList.stream().collect(Collectors.groupingBy(x-> x.getDesignation()));
                System.out.println("Checking details "+ collect);

span {
  background-color: #f18973;
  border-radius: 10px;  
}