CSS圓高亮顯示是一種常用的網頁設計效果,通常用于強調重要的內容或元素。實現這種效果的方法很簡單,只需要在CSS樣式表中添加以下代碼即可:
.circle { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background-color: #ffcc00; box-shadow: 0 0 10px #ffcc00; }
上述代碼定義了一個圓形的元素,其中display
屬性設置為inline-block
,可以使元素水平排列,并且可以設置寬度和高度。通過border-radius
屬性設置圓角半徑,background-color
屬性設置背景顏色,box-shadow
屬性設置陰影效果,讓圓形更加醒目。
為了讓圓形元素在鼠標懸停時高亮顯示,可以添加以下代碼:
.circle:hover { background-color: #ff9933; box-shadow: 0 0 20px #ff9933; }
上述代碼使用了CSS偽類:hover
,表示當鼠標懸停在元素上時,應用這些樣式。background-color
屬性和box-shadow
屬性被修改為更加鮮艷明亮的顏色,使得圓形元素更加突出。
通過以上代碼,即可實現圓形高亮顯示的效果。在實際應用中,還可以添加其他樣式,如文字、邊框等,來達到不同的效果。