css氣泡聊天框效果
現在的聊天視窗都具有氣泡效果,一個是比較美觀,第二個能夠明確指示發言人是誰。
下面介紹一下如何利用css實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .send{ position:relative; width:150px; height:35px; background:#F8C301; border-radius:5px; margin:30px auto 0; } .send .arrow{ position:absolute; top:5px; right:-16px; width:0; height:0; font-size:0; border:solid 8px; border-color:#FFF #FFF #FFF #F8C301; } </style> </head> <body> <div class="send"> <div class="arrow"></div> </div> </body> </html>
相關閱讀:
(1).border-radius參閱CSS3圓角效果一章節。
相關文章
- css實現氣泡框效果CSS
- 製作CSS氣泡框CSS
- CSS3聊天氣泡框以及inherit、currentColor關鍵字CSSS3
- css3氣泡動態上升效果CSSS3
- CSS進階篇--CSS3實現氣泡效果CSSS3
- reactnative實現qq聊天訊息氣泡拖拽消失效果React
- 純CSS製作帶三角的邊框(氣泡框或者提示框)CSS
- 使用純 CSS 實現超酷炫的粘性氣泡效果CSS
- css實現的氣泡型提示框程式碼例項CSS
- css3實現的氣泡效果程式碼例項CSSS3
- 線上直播原始碼,自定義氣泡效果(BubbleView)原始碼View
- 直播平臺搭建,自定義氣泡效果(BubbleView)View
- iOS 微信聊天訊息的圖片氣泡實現iOS
- 巧用 CSS 動畫實現動態氣泡背景CSS動畫
- css動態邊框效果CSS
- 氣泡排序排序
- css氣泡對話方塊程式碼例項CSS
- css製作下拉框效果CSS
- 9. 氣泡排序,以及如何優化氣泡排序,氣泡排序屬於插入排序排序優化
- 排序——氣泡排序排序
- js氣泡排序JS排序
- 氣泡排序-fusha排序
- 氣泡排序演示排序
- Shell氣泡排序排序
- d氣泡排序排序
- 氣泡排序正解排序
- JavaScript氣泡排序JavaScript排序
- java氣泡排序Java排序
- 氣泡排序 java排序Java
- php氣泡排序PHP排序
- Java 氣泡排序Java排序
- Javascript 氣泡排序JavaScript排序
- 氣泡排序1排序
- 雕蟲曉技(十) Android超簡單氣泡效果Android
- CSS圖片邊框陰影效果CSS
- CSS3多層邊框效果CSSS3
- CSS虛線邊框效果程式碼CSS
- css實現的交叉邊框效果CSS