實現下圖的加號效果：
若想實現這個效果， 只需一個div元素即可搞定。
需要用到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偽類，設置鼠標懸浮上去的顏色：
.add:hover { color: blue;}最終的樣式：
當鼠標懸浮上去是， 會變色：
大家可以在這里查看效果：
https://jsbin.com/quvidap/edit?html,css,output
總結
以上所述是小編給大家介紹的css實現“加號”效果的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
