CSS 蘋果短信界面是一種非常流行的 Web 界面樣式，具有簡潔明了、美觀大方的特點。下面給大家介紹一些實現(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 中可以通過以下方式使用：

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

對于發(fā)送者的短信，我們可以添加一個.me類，代碼中的樣式會覆蓋默認樣式：

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

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