最近我學習了如何使用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