怎么用純CSS3實現(xiàn)自定義Tooltip邊框涂鴉風(fēng)格

這篇文章主要介紹“怎么用純CSS3實現(xiàn)自定義Tooltip邊框涂鴉風(fēng)格”，在日常操作中，相信很多人在怎么用純CSS3實現(xiàn)自定義Tooltip邊框涂鴉風(fēng)格問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用純CSS3實現(xiàn)自定義Tooltip邊框涂鴉風(fēng)格”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

　　這是一款用純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è)置，就非常簡單了。

到此，關(guān)于“怎么用純CSS3實現(xiàn)自定義Tooltip邊框涂鴉風(fēng)格”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>