溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS中怎么實(shí)現(xiàn)凹型導(dǎo)航按鈕效果

發(fā)布時(shí)間：2021-08-07 17:23:54 來源：億速云 閱讀：145 作者：Leah 欄目：web開發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)CSS中怎么實(shí)現(xiàn)凹型導(dǎo)航按鈕效果，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

  1. <!DOCTYPE html>    

  2. <html>    

  3. <head>    

  4.     <meta charset="utf-8">    

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">    

  6.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">    

  7.     <title>css凹型導(dǎo)航</title>    

  8.      

  9. </head>    

  10. <body>    

  11. <nav id="nav">    

  12.     <ul>    

  13.         <li>    

  14.             <div class="left"></div>    

  15.             <div class="con">導(dǎo)航1</div>    

  16.             <div class="right"></div>    

  17.         </li>    

  18.         <li>    

  19.             <div class="left"></div>    

  20.             <div class="con">導(dǎo)航2</div>    

  21.             <div class="right"></div>    

  22.         </li>    

  23.         <li>    

  24.             <div class="left"></div>    

  25.             <div class="con">導(dǎo)航3</div>    

  26.             <div class="right"></div>    

  27.         </li>    

  28.         <li>    

  29.             <div class="left"></div>    

  30.             <div class="con">導(dǎo)航4</div>    

  31.             <div class="right"></div>    

  32.         </li>    

  33.     </ul>    

  34. </nav>    

  35. </body>    

  36. </html>  

再看CSS

CSS Code復(fù)制內(nèi)容到剪貼板

  1. #nav {    

  2.             background: #fff;    

  3.             border-bottom: 1px solid #7bd1ff;    

  4.             width: 960px;    

  5.             margin: 100px auto;    

  6.             height: 60px;;    

  7.         }    

  8.      

  9.         #nav ul li {    

  10.             float: left;    

  11.             list-style: none;    

  12.             height: 60px;    

  13.             margin: 0 10px;    

  14.         }    

  15.      

  16.         li * {    

  17.             float: left;    

  18.             transition: all .2s;    

  19.         }    

  20.      

  21.         .con {    

  22.             width: 60px;    

  23.             height: 60px;    

  24.             line-height: 60px;    

  25.             text-align: center;    

  26.             background: #7bd1ff;    

  27.             border-radius: 10px 10px 0 0;    

  28.         }    

  29. 　　　　　/*   

  30. 　　　　　　設(shè)置凹型的尺寸，   

  31. 　　　　　　通過margin定位   

  32. 　　　　　*/    

  33. .left, .rightright {    

  34.  width: 7px; height: 7px; margin: 53px 0 0 0;     

  35. }    

  36.  　　　　　/*   

  37. 　　　　　　下面的是關(guān)鍵，主要是用到了徑向漸變 radial-gradient，   

  38. 　　　　　　通過比例劃分實(shí)現(xiàn)直接透明過度到背景色，沒有漸變   

  39. 　　　　　　測試結(jié)果顯示 transparent 50% 并不能一半透明一半有顏色，70%+比較何時(shí)   

  40. 　　　　　*/    

  41. .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #7bd1ff 30%); }    

  42.  .rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #7bd1ff 30%); }    

  43.      

  44.      

  45.  li:hover .con { background: #2d85ff }    

  46.  li:hover .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #2d85ff 30%); }    

  47.  li:hover .rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #2d85ff 30%); }  

上述就是小編為大家分享的CSS中怎么實(shí)現(xiàn)凹型導(dǎo)航按鈕效果了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手