欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS3實現(xiàn)自定義Tooltip邊框涂鴉風(fēng)格的教程

  發(fā)布時間：2014-11-05 14:22:14   作者：佚名   我要評論
這篇文章主要為大家介紹了利用純CSS3打造的自定義Tooltip邊框的應(yīng)用，今天的這款Tooltip卻可以用CSS3來自定義邊框，邊框呈涂鴉風(fēng)格。用CSS3實現(xiàn)自定義邊框的好處是可以自適應(yīng)邊框內(nèi)部的文字數(shù)量大小

　　這是一款用純CSS3打造的自定義Tooltip邊框的應(yīng)用，之前我們討論過如何用CSS3來實現(xiàn)不同樣式的Tooltip，今天的這款Tooltip卻可以用CSS3來自定義邊框，邊框呈涂鴉風(fēng)格。用CSS3實現(xiàn)自定義邊框的好處是可以自適應(yīng)邊框內(nèi)部的文字數(shù)量大小。

　　下面我們來分享一下實現(xiàn)的方法，主要由HTML代碼和CSS代碼組成。

　　HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div>  
  2.     <div>  
  3.         <div>CSS3簡單實現(xiàn)涂鴉風(fēng)格邊框 Welcome to</div>  
  4.     </div>  
  5. </div>  
    6. 　　

　　HTML代碼結(jié)構(gòu)非常簡單，僅僅是3個div組成，當(dāng)然后面的CSS代碼才是關(guān)鍵，我們一步步來解說一下。

　　CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .wrap {   
  2.     padding:35px 25px;   
  3.     width:450px;   
  4.     margin:40px auto;   
  5.     background:#586786;   
  6.     border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;   
  7.     color:#eee;   
  8.     box-shadow:1px 1px 0px rgba(0, 0, 0, .75)   
  9. }  
　　這個CSS代碼定義了最外面的邊框，利用border-radius實現(xiàn)邊框的圓角效果，同時利用了box-shadow實現(xiàn)類微微的陰影效果，不是很明顯，你也可以修個屬性值來讓陰影變得更加明顯一點。
CSS Code復(fù)制內(nèi)容到剪貼板
  1. .box {   
  2.     position:relative;   
  3.     background:#fff;   
  4.     border:solid 5px #fff;   
  5.     width:200px;   
  6.     height:100px;   
  7.     margin:0 auto;   
  8.     border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;   
  9.     padding:10px;   
  10.     color:#666;   
  11.     box-shadow:2px 3px 1px rgba(0, 0, 0, .75)   
  12. }   
  13. .box:before {   
  14.     content: "";   
  15.     position: absolute;   
  16.     bottombottom: -20px;   
  17.     left: 60px;   
  18.     border: 0;   
  19.     border-right-width: 30px;   
  20.     border-bottom-width: 20px;   
  21.     border-style: solid;   
  22.     border-color: transparent #fff;   
  23.     display: block;   
  24.     width: 0;   
  25. }  

　　這個box類和之前的類似，不過多了一個特性，就是利用CSS3的:before屬性實現(xiàn)了下邊框的小三角效果，這樣就有tooltip的效果了。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .box .box {   
  2.     position:absolute;   
  3.     top:5px;   
  4.     left:5px;   
  5.     width:180px;   
  6.     height:80px;   
  7.     border-color:#593207;   
  8.     box-shadow:none;   
  9. }   
  10. .box .box:before {   
  11.     left: 45px;   
  12.     border-color: transparent #593207;   
  13. }  

　　這是最內(nèi)部的box，和它外面那層box實現(xiàn)一樣，同樣利用before屬性實現(xiàn)小三角效果。

　　其他就是一些邊框線顏色和背景顏色的設(shè)置，就非常簡單了。就不一一寫代碼了，謝謝閱讀，希望能幫到大家，請繼續(xù)關(guān)注腳本之家，我們會努力分享更多優(yōu)秀的文章。

相關(guān)文章

最新評論