使用border-radius没有设置宽度或高度的胶囊形状？ [英] Capsule shape using border-radius without a set width or height?

问题描述

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

我希望左右两边完全圆滑，胶囊将沿其水平长度保持笔直。将半径设置为50％似乎不会产生所需的效果。

，Chrome）喜欢这个mod的大卫的小提琴 http://jsfiddle.net/cthQW/1/

  border-radius：500px; 
  

Is it possible to make a capsule shape using border-radius without a set width or height?

I want the left and right sides to be completely rounded while the capsule would remain straight along it's horizontal length. Setting the radius to 50% doesn't seem to give the desired affect.

解决方案

Applying a very large border radius seems to work on many browsers (IE9+, FF, Chrome) like this mod of David's fiddle http://jsfiddle.net/cthQW/1/

border-radius: 500px;

这篇关于使用border-radius没有设置宽度或高度的胶囊形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！