塗鴉風格的對話框

這是一款用純CSS3打造的自定義Tooltip邊框的應用，以前咱們討論過如何用CSS3來實現不一樣樣式的Tooltip，今天的這款Tooltip卻能夠用CSS3來自定義邊框，邊框呈塗鴉風格。用CSS3實現自定義邊框的好處是能夠自適應邊框內部的文字數量大小。 在線演示    源碼下載 下面咱們來分享一下實現的方法，主要由HTML代碼和CSS代碼組成。 HTML代碼： <div>         <div>                 <div>CSS3簡單實現塗鴉風格邊框 ** to</div>         </div> </div> 複製代碼 HTML代碼結構很是簡單，僅僅是3個div組成，固然後面的CSS代碼纔是關鍵，咱們一步步來解說一下。 CSS代碼： .wrap {         padding:35px 25px;         width:450px;         margin:40px auto;         background:#58**6;         border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;         color:#eee;         box-shadow:1px 1px 0px rgba(0, 0, 0, .75) } 複製代碼 這個CSS代碼定義了最外面的邊框，利用border-radius實現邊框的圓角效果，同時利用了box-shadow實現類微微的陰影效果，不是很明顯，你也能夠修個屬性值來讓陰影變得更加明顯一點。 .box {         position:relative;         background:#fff;         border:solid 5px #fff;         width:200px;         height:100px;         margin:0 auto;         border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;         padding:10px;         color:#666;         box-shadow:2px 3px 1px rgba(0, 0, 0, .75) } .box:before {         content: "";         position: absolute;         bottom: -20px;         left: 60px;         border: 0;         border-right-width: 30px;         border-bottom-width: 20px;         border-style: solid;         border-color: transparent #fff;         display: block;         width: 0; } 複製代碼 這個box類和以前的相似，不過多了一個特性，就是利用CSS3的:before屬性實現了下邊框的小三角效果，這樣就有tooltip的效果了。 .box .box {         position:absolute;         top:5px;         left:5px;         width:180px;         height:80px;         border-color:#593207;         box-shadow:none; } .box .box:before {         left: 45px;         border-color: transparent #593207; } 複製代碼 這是最內部的box，和它外面那層box實現同樣，一樣利用before屬性實現小三角效果。 其餘就是一些邊框線顏色和背景顏色的設置，就很是簡單了。