CSS聊天气泡
概述
谷歌效果圖如下：
ie效果圖如下：
完整代碼
<!DOCTYPE html> <html> <head><meta charset="gbk" /><title>test</title><style>/**容器樣式**/.container{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; //min-width:200px;min-height:300px;border-radius:5px;border:1px solid #E0E0E0;-webkit-box-shadow: #E0E0E0 0px 0px 10px inset;-moz-box-shadow: #E0E0E0 0px 0px 10px inset;box-shadow: #E0E0E0 0px 0px 10px inset;overflow-y:scroll;word-wrap: break-word;word-break: break-all; }/**谷歌滾動條樣式修改**/.webkit-scroll::-webkit-scrollbar {width: 10px;}.webkit-scroll::-webkit-scrollbar-track {/* 滾動條的滑軌背景顏色 */background-color:#ffffff;box-shadow: inset 0 0 5px rgba(0,0,0,.3);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius:5px;}.webkit-scroll::-webkit-scrollbar-thumb {/* 滑塊顏色 */background-color:#bbb;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius:5px;}.webkit-scroll::-webkit-scrollbar-thumb:hover {/* 滑塊hover的顏色 */background-color:#5ABFDD;}.webkit-scroll::-webkit-scrollbar-button {/* 滑軌兩頭的監聽按鈕顏色 *///background-color:#5ABFDD;} .webkit-scroll::-webkit-scrollbar-corner {/* 橫向滾動條和縱向滾動條相交處尖角的顏色 *///background-color: #ffffff;} /**ie滾動條樣式修改**/.ie-scroll{scrollbar-face-color:#5ABFDD;scrollbar-shadow-color:#5ABFDD;scrollbar-highlight-color:#5ABFDD;scrollbar-3dlight-color:#5ABFDD;scrollbar-darkshadow-color:#5ABFDD;scrollbar-track-color:#ffffff;scrollbar-arrow-color:#EFAD4D;}/**氣泡樣式**/.pop{//background:yellow;display:inline-block;margin-top:10px;margin-left:10px; margin-right:10px;width:90%;}.pop-img{width:40px;height:40px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius:20px;display:inline-block;color:white;font-family:12px;line-height:41px;//垂直居中}.pop-left,.pop-right{//background:pink;max-width:50%;position:relative;border:1px solid black;margin-left:10px; margin-right:10px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:3px;display:inline-block; //寬度隨內容適應 }.pop-left:before{content:"";position:absolute;right:100%;top:10px;border-top:6px solid transparent;border-right:6px solid black;border-bottom:6px solid transparent;}.pop-right:after{content:"";position:absolute;left:100%;top:10px;border-top:6px solid transparent;border-left:6px solid black;border-bottom:6px solid transparent;}.pop-text{background:black;color:white;padding:10px;}.ff{float:left;}.fr{float:right;}.pop-br{/**換行div**///background:blue;height: 1px; width:100%;}.time{font-size:12px;}</style> </head> <body><div class="container webkit-scroll ie-scroll"><div class="pop ff "><div class="pop-img ff" style="background:rgba(100,200,150,.8)"><center>迢迢</center></div><div class="pop-left ff"><div class="pop-text"><span class="time">2018-03-08 12:02:46</span><br>測試內容測試內容測試內容測試內容測試內容測試內測試內容測試內測試內容測試內測試內容測試內測試內容測試內測試內容測試內</div></div></div><div class="pop-br"/><div class="pop fr"><div class="pop-img fr" style="background:rgba(250,10,50,.9)"><center>西悉</center></div><div class="pop-right fr"><div class="pop-text"><span class="time">2018-03-08 12:03:10</span><br>測試內容測試內容測試內容測試內容</div></div></div><div class="pop-br"/><div class="pop ff "><div class="pop-img ff" style="background:rgba(100,200,150,.8)"><center>迢迢</center></div><div class="pop-left ff"><div class="pop-text"><span class="time">2018-03-08 12:04:01</span><br>測試內容</div></div></div><div class="pop-br"/><div class="pop fr"><div class="pop-img fr" style="background:rgba(250,10,50,.9)"><center>西悉</center></div><div class="pop-right fr"><div class="pop-text"><span class="time">2018-03-08 12:04:50</span><br>測試</div></div></div><div class="pop-br"/></div> </body> </html>?
轉載于:https://www.cnblogs.com/xmqa/p/8664464.html
總結
- 上一篇： 东大22春《计算机应用基础》在线平时作业
- 下一篇： 计算机国内核心期刊投稿周期及内容提要