CSS菜單選擇圓弧是一種非常流行的設計趨勢,可以為網站增加更加優雅的外觀。下面是一個使用CSS菜單選擇圓弧的示例:
.menu { display: flex; list-style: none; justify-content: center; align-items: center; background-color: #2C3E50; border-radius: 50px; width: 400px; height: 50px; } .menu li { margin: 0 20px; position: relative; } .menu li a { font-size: 18px; color: #FFFFFF; text-align: center; text-decoration: none; padding: 10px; z-index: 1; } .menu li:before { content: ""; position: absolute; width: 100%; height: 100%; background-color: #FFFFFF; border-radius: inherit; transform: scale(0); z-index: -1; transition: transform 0.3s ease; } .menu li:hover:before { transform: scale(1); }
上面的代碼使用了圓角邊框半徑屬性,即“border-radius”,來創建圓角效果。同時,使用偽類“:before”,并在其中嵌套一個擴展了父類圓角樣式的背景色框。設置初始狀態為scale為0,即開始時是不可見的。當鼠標懸停在菜單選項上時,使用CSS過渡效果將scale變為1,觸發背景色框的展開效果。
這樣就可以通過簡單的CSS代碼實現一個簡潔漂亮的圓角菜單選擇效果了。