CSS 是前端開發中最常用的一種樣式表語言,它可以用來美化頁面,為網站增添動態效果和交互性。而在 CSS 中,畫固定半徑圓環可以使用 border-radius 屬性來實現。
/* HTML 代碼 */ <div class="ring"></div> /* CSS 代碼 */ .ring { width: 100px; /* 圓環寬度 */ height: 100px; /* 圓環高度 */ border: 10px solid #F00; /* 圓環顏色 */ border-radius: 50%; /* 圓環半徑 */ }
以上代碼中,我們首先在 HTML 中創建了一個 div 元素,并將其設置為類名為 “ring”。在 CSS 中,我們通過設置元素的寬度、高度、邊框樣式和顏色來畫出固定半徑為 50px、寬度為 10px 的圓環。圓環的填充顏色為紅色(#F00),而半徑則通過 border-radius 屬性來設置。
此外,如果我們想要設置圓環的粗細和顏色,可以通過 border-width 和 border-color 屬性來實現。如果想要使圓環內部透明,可以將背景色設置為透明色(transparent)。
.ring { width: 100px; height: 100px; border: 5px solid #F00; border-color: #F00 transparent transparent transparent; /* 圓環顏色 */ border-width: 10px; /* 圓環粗細 */ border-radius: 50%; }
通過以上代碼,我們可以得到一個寬度為 10px、顏色為紅色、內部透明、半徑為 50px 的固定半徑圓環。在實際項目中,我們可以調整這些屬性值來滿足不同的樣式需求。