CSS3 实现未读消息小红点
程序员文章站
2022-07-12 13:36:48
...
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.red-point{
position: relative;
}
.red-point::before{
content: " ";
border: 3px solid red;/*设置红色*/
border-radius:3px;/*设置圆角*/
position: absolute;
z-index: 1000;
right: 0;
margin-right: -8px;
}
</style>
</head>
<body>
<span class="red-point">设置</span>
</body>
</html>效果图：
上一篇： Javascript的域和提升
下一篇： 怎样解决Js代码中click事件重复触发