css提示新消息数量 |css3圆角兼容ie7

首先，需要一个HTML元素来显示新消息数量。大家用一个CSS类来定义它的样式：

.new-msg {
background-color: red;
color: white;
font-size: 12px;
font-weight: bold;
padding: 3px 6px;
border-radius: 50%;
}

这样大家就定义了一个圆形的新消息提醒，它的颜色是红色，字体的颜色是白色，字体大小为12像素，字体的粗细为bold，内部有一个3像素高，6像素宽的padding。border-radius属性可以用来设置圆形。现在，大家可以将这个类应用到任何需要提示新消息数量的元素上。

例如，在用户登录后，大家要提示他有多少条新消息。大家可以使用如下HTML代码：

欢迎回来！您有3条新消息。

这里的数字3可以使用JavaScript来动态替换。同时，大家可以进一步使用CSS选择器来控制该元素的显示与隐藏：

.new-msg {
background-color: red;
color: white;
font-size: 12px;
font-weight: bold;
padding: 3px 6px;
border-radius: 50%;
display: none;
}
.has-new-msg .new-msg {
display: inline-block;
}

在这里，大家定义了一个新的CSS类“has-new-msg”。大家使用JavaScript来检测用户是否有新消息，并动态向HTML元素添加这个类。然后，大家使用has-new-msg类来控制新消息提示元素的可见性。

以上就是使用CSS来提示新消息数量的方法。通过CSS，大家可以使用样式来美化新消息提示，并且还可以通过JavaScript使用CSS选择器来控制元素的可见性。这种方法同样适用于其他交互效果的开发。