css做消息图标 |css如何设置文本居中

/* HTML代码 */
<div class="message-icon"></div>
/* CSS代码 */
.message-icon {
width: 50px;
height: 50px;
background-color: #ff6a6a;
border-radius: 50%;
position: relative;
}
.message-icon:before,
.message-icon:after {
content: "";
width: 20px;
height: 20px;
background-color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
}
.message-icon:before {
content: "";
width: 10px;
height: 10px;
background-color: #ff6a6a;
position: absolute;
top: -8px;
right: -8px;
border-radius: 50%;
}
.message-icon:after {
content: "";
width: 5px;
height: 5px;
background-color: #ff6a6a;
position: absolute;
top: 18px;
right: -8px;
border-radius: 50%;
}

如上所示，大家使用CSS来创建一个圆形的消息图标，整个图标使用了50px的宽度和高度，圆角使用了border-radius来实现。同时，在图标中，大家使用了:before和:after伪类来实现两个圆形的白色背景，以及一个小圆点，这样整个图标就呈现出了一个类似于气泡的效果，非常符合消息图标的视觉效果。

当然，这只是最基础的消息图标，大家还可以根据需要调整颜色、大小、边框等方面的样式来美化整个图标，以符合实际应用场景的需求。