css自适应的圆

有时候我们会有这种需求：

• 需要一个随着父框变化而变化，即自适应
• 本身形状不变，如圆

针对自适应，我们可以采用百分比处理，但问题就出现在父框的宽高可能不等，即，要同时满足自适应和形状不变不能只靠百分比。于是我们可以利用padding-top,padding-bottom和border-top,border-bottom的百分比的“奇怪特性”——其百分比是相对于父框的宽，而非我们想当然的高。 以下示例，我设定圆的高度为0，而上下padding:25%; 而圆使用了css3的特性。 代码如下：