CSS圓形(circle)是網頁設計中常用的樣式之一,下面介紹一些實現圓形的方法。
.circle { width: 50px; height: 50px; border-radius: 50%; }
以上代碼實現了一個50像素直徑的圓形,border-radius的值為50%表示圓角半徑是元素寬度和高度的一半。
.circle { width: 50px; height: 50px; border-radius: 50%; background-color: #f00; }
在上面的代碼基礎上添加了背景顏色,實現了一個紅色的圓形。
.circle { width: 50px; height: 50px; border-radius: 50%; background-color: #f00; display: inline-block; line-height: 50px; text-align: center; color: #fff; font-size: 24px; }
在已有的樣式上添加了一些樣式,實現了一個帶文本的圓形。其中,display: inline-block可以讓元素變成行內塊級元素,line-height: 50px可以讓文本垂直居中,text-align: center可以讓文本水平居中,color: #fff可以設置文本顏色為白色,font-size: 24px可以設置文本大小為24像素。
以上就是CSS圓形的幾種實現方法,使用起來非常簡單,可以根據需求選擇合適的實現方案。
下一篇mysql來歷