Hygge996
commented
7 months ago <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.badge {
width: 100px;
height: 100px;
background-color: #3498db; /* 设置徽章的背景颜色 */
border-radius: 50%; /* 将边框半径设置为50%，使其成为一个圆形 */
display: flex;
justify-content: center;
align-items: center;
color: #fff; /* 设置文字颜色为白色 */
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="badge">
1
</div>
</body>
</html>width和height属性定义了徽章的宽度和高度。background-color属性设置了徽章的背景颜色。border-radius: 50%将边框半径设置为50%，使元素呈现为一个圆形。display: flex; justify-content: center; align-items: center;用于将徽章中的文本水平和垂直居中。color属性设置了文本颜色。font-weight: bold;使文本加粗。text-align: center;将文本居中对齐。
第1755天 使用CSS3制作一个圆形徽章
3+1官网
我也要出题