bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

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

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

昭化ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

  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. 　　　　　　通過比例劃分實現(xiàn)直接透明過度到背景色，沒有漸變  

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

  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中怎么實現(xiàn)凹型導(dǎo)航按鈕效果了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：CSS中怎么實現(xiàn)凹型導(dǎo)航按鈕效果
新聞來源：http://vcdvsql.cn/article18/gjidgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、品牌網(wǎng)站建設(shè)、域名注冊、電子商務(wù)、網(wǎng)站改版、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)