css圆形图标怎么设置 |css点击图片弹出提示框

.step1 {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #333;
}

在上面的CSS代码中，大家首先设置了一个DIV元素。大家使用了border-radius属性来设置DIV元素的半径为50％，这样它就变成了一个圆形元素。

然后，大家设置了DIV元素的宽度和高度都为100px，这是为了确保大家的圆形图标是正圆的。最后，大家添加了一个背景颜色为#333，你可以把它改成你喜欢的颜色。

.step2 {
border: 1px solid #333;
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
font-size: 30px;
}

上面的CSS代码显示了一个更完整的CSS圆形图标的设置。大家使用了border属性来添加一个细边框。大家使用了display: inline-block;来确保圆形图标在行内显示。大家设置了宽度和高度都为50px来保持圆形图标的大小。

注意，大家仍然使用了border-radius属性将元素设置为圆形，line-height属性设置为50px来确保图标位于圆形中央，并将文本居中（使用text-align属性和font-size属性）。

通过以上的CSS代码，你可以在你的网站上创建一个漂亮的CSS圆形图标！