CSS實現圖片上傳加號是一種常見的技巧,在Web開發中經常用到,該技巧可以使上傳圖片按鈕更加美觀和易于識別。下面我們將介紹如何使用CSS實現這種效果。
.upload-btn { width: 100px; height: 100px; border: 2px solid #ccc; border-radius: 50%; background-color: #f9f9f9; display: flex; justify-content: center; align-items: center; } .upload-btn:hover { background-color: #ddd; } .upload-btn::before, .upload-btn::after { content: ''; width: 20px; height: 2px; background-color: #666; position: absolute; top: 50%; transform: translate(-50%, -50%); } .upload-btn::before { left: 45%; } .upload-btn::after { left: 50%; }
代碼中,首先定義了一個名為“upload-btn”的類,用來表示上傳圖片的按鈕。該類設置了按鈕的寬度、高度、邊框、圓角和背景顏色,并使用flex布局使其內容水平和垂直居中。
在按鈕懸浮時,使用:hover選擇器設置了按鈕背景顏色的變化,讓用戶可以更加直觀地感知到鼠標的操作。
接著,通過“::before”和“::after”偽元素來實現“+”號的效果。它們都設置了內容為空(content: ''),高度為2px,寬度為20px,背景顏色為#666(深灰色)。兩個偽元素的位置使用了絕對定位,并通過“left”屬性設置了它們離按鈕中心的距離,其中左邊的偽元素離中心稍遠一些(left: 45%)。
上述代碼經過適當的調整會更適合不同的設備和場景,大家可以在實際應用中進行實驗和調整。
下一篇css實現圖片模糊