css 好看的聊天气泡
时间: 2023-09-03 08:16:04 浏览: 67
如果您想要制作一个好看的聊天气泡效果,可以参考以下CSS代码:
```css
/*气泡*/
.pop {
position:relative;
width:100px;
height:35px;
line-height: 33px;
color:#fff;
border-radius:5px; /* 圆角 */
background-color: #4D4948;
border:1px solid #4D4948;
text-align: center;
margin-right: 30px;
}
/*尖角在左侧*/
.pop .arrow {
position:absolute;
top:5px;
left:-16px; /* 圆角的位置需要细心调试哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#fff #4D4948 #fff #fff;
}
```
这段CSS代码会创建一个宽度为100px,高度为35px的聊天气泡。通过设置背景颜色、边框样式和圆角的属性,可以使气泡看起来更漂亮。另外,通过调整尖角的位置和样式,可以使气泡看起来更加立体和生动。您可以根据自己的需求进行调整,例如改变背景颜色、边框颜色和尖角的大小等。
希望以上内容对您有所帮助!<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [CSS实现聊天气泡效果](https://blog.csdn.net/qq_45457134/article/details/121512675)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Q定制云印刷在线DIY定制系统 v5.0 - PHP在线DIY定制系统下载](https://download.csdn.net/download/weixin_36643308/88248678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)