溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹css如何實現加號一個的效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
實現下圖的加號效果：
若想實現這個效果， 只需一個p元素即可搞定。
需要用到css的為了before和after， 以及border特性。
先設置一個div便簽
<div class="add"></div>
再設置一個邊框：
.add {
border: 1px solid;
width: 100px;
height: 100px;
color: #ccc;
transition: color .25s;
position: relative;
}此時邊框是這樣的：
我們可以利用偽類before和其border-top來設置一個“橫”：
.add::before{
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 80px;
margin-left: -40px;
margin-top: -5px;
border-top: 10px solid;
}注意我們使了絕對定位。 此時變成了這樣：
參照上面， 我們可以使用after偽類和border-bottom設置一個“豎”：
.add::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
height: 80px;
margin-left: -5px;
margin-top: -40px;
border-left: 10px solid;
}在加上hover偽類，設置鼠標懸浮上去的顏色：
最終的樣式：
當鼠標懸浮上去是， 會變色：
以上是css如何實現加號一個的效果的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
