有時候我們會有這種需求：

• 需要一個隨著父框變化而變化，即自適應
• 本身形狀不變，如圓

針對自適應，我們可以采用百分比處理，但問題就出現在父框的寬高可能不等，即，要同時滿足自適應和形狀不變不能只靠百分比。于是我們可以利用padding-top,padding-bottom和border-top,border-bottom的百分比的“奇怪特性”——其百分比是相對于父框的寬，而非我們想當然的高。 以下示例，我設定圓的高度為0，而上下padding:25%; 而圓使用了css3的特性。 代碼如下：

轉載于:https://www.cnblogs.com/defims/archive/2011/12/23/2946707.html

總結

以上是生活随笔為你收集整理的css自适应的圆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。