CSS 蘋(píng)果短信界面是一種非常流行的 Web 界面樣式，具有簡(jiǎn)潔明了、美觀大方的特點(diǎn)。下面給大家介紹一些實(shí)現(xiàn)方法。

.message {
background-color: #f0f0f0;
border-radius: 10px;
margin-bottom: 10px;
max-width: 70%;
display: inline-block;
padding: 10px;
position: relative;
}
.message:before {
content: "";
position: absolute;
right: -10px;
top: 10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 10px solid #f0f0f0;
border-bottom: 10px solid transparent;
}
.me {
background-color: #007aff;
color: #fff;
margin-left: 30%;
}
.me:before {
border-top: 10px solid transparent;
border-left: 10px solid #007aff;
border-bottom: 10px solid transparent;
right: auto;
left: -10px;
}

以上是 CSS 代碼，在 HTML 中可以通過(guò)以下方式使用：

<div class="message">
<p>這是一條短信</p>
</div>

對(duì)于發(fā)送者的短信，我們可以添加一個(gè).me類(lèi)，代碼中的樣式會(huì)覆蓋默認(rèn)樣式：

<div class="message me">
<p>這是我發(fā)送的短信</p>
</div>

需要注意的是，由于蘋(píng)果短信界面的特殊性，該樣式只適用于寬度較小的短信界面。如果需要在 PC 端使用，建議對(duì)樣式進(jìn)行調(diào)整。