欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css仿微信聊天消息

老白2年前10瀏覽0評論

最近我學習了如何使用CSS來仿制微信聊天消息的樣式,以下是我的經驗總結:

.message {
padding: 10px 20px;
border-radius: 8px;
max-width: 70%;
position: relative;
word-wrap: break-word;
margin-bottom: 20px;
}
.message .bubble {
position: relative;
background-color: #fff;
}
.message .bubble:before,
.message .bubble:after {
content: "";
position: absolute;
bottom: 0;
border-style: solid;
}
.message .bubble:before {
border-color: transparent transparent #fff transparent;
border-width: 0 10px 10px 10px;
left: -10px;
}
.message .bubble:after {
border-color: transparent transparent #fff transparent;
border-width: 0 8px 8px 8px;
left: -8px;
}
.me .bubble {
background-color: #DCF8C6;
}
.me .bubble:before,
.me .bubble:after {
border-color: transparent transparent #DCF8C6 transparent;
}
.me .bubble:before {
right: -10px;
border-width: 0 10px 10px 0;
}
.me .bubble:after {
right: -8px;
border-width: 0 8px 8px 0;
}

以上CSS代碼實現了仿微信聊天消息的核心樣式,其中包括了邊框、背景色、彈出三角形等細節。我們只需要在HTML中添加相應元素和對應的class,就可以輕松實現仿微信界面。完整代碼可以查看我的GitHub:https://github.com/example