css怎么自定圆圈 |css 文字变细 大小不变

/*设置单一元素为圆形*/
.circle {
border-radius: 50%;
width: 100px;
height: 100px;
}
/*设置内联元素为圆形*/
span.circle {
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
}
/*设置多个元素为圆形*/
div.circle {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
width: 100px;
height: 100px;
margin: 10px;
}
/*设置背景颜色*/
div.circle {
background-color: #F1C40F;
}
/*加入文本*/
div.circle p {
color: #FFF;
text-align: center;
}

注意，以上 CSS 代码中，大家使用了border-radius: 50%属性，这是实现圆形元素的基础。其中，50% 的设置表示圆形元素的宽度和高度都是父元素的一半，从而实现了等比例变换。

除了以上的样式代码，大家还可以结合 CSS3 中的伪元素选择器实现更多样化的样式。下面是一个示例：

/*添加外阴影*/
div.circle {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/*添加内阴影*/
div.circle:before {
content: '';
display: block;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50%;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

上面的代码中，大家设置了圆形元素的外阴影和内阴影，让该圆形元素看上去更立体。

总之，通过 CSS 的设置，大家可以轻松地实现自定义的圆形元素，更好地为网页设计服务。