在網頁中,實心圓是一種非常常見的圖形,可以用來制作圖標、按鈕等,下面就讓我們來學習如何用 CSS 實現一個實心圓吧。
.circle{ width: 100px; height: 100px; background-color: #f00; border-radius: 50%; }
上面的代碼就是實現一個實心圓的 CSS 樣式,我們來分析一下。首先,通過width和height屬性設置圓的寬高,需要注意的是兩者的值必須相等,否則會成為橢圓。接著,用background-color屬性設置圓的背景顏色,這里我選擇了紅色。最后,用border-radius屬性設置圓角半徑,這里取了 50%,即半徑為寬度或高度的一半。
最后,使用以上樣式的 HTML 代碼如下:
<div class="circle"></div>
這樣,就能在頁面上看到一個實心圓了。
上一篇$each讀取json
下一篇mysql中的預處理語句