将＜span＞标签设为圆形

最新推荐文章于 2024-10-22 16:14:28 发布

原创最新推荐文章于 2024-10-22 16:14:28 发布 · 3.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5

这篇博客介绍了如何使用CSS样式来创建圆形元素，通过设置`border-radius`属性达到目的，并展示了蓝色和红色两种颜色的示例。此外，还提供了一个前端头像的实现方式，利用`text-align`, `line-height`和`border-radius`等属性，创建了一个带有天空蓝背景和白色文字的头像展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个是当时工作时在网上找到的，不知道是哪篇博客了

<style>
	/*设置圆形*/
	.circle {
	    /*宽高相等*/
	    height: 50px;
	    width: 50px;
	    /*设置圆角边框，尺寸为宽高的一半，就是正圆*/
	    border-radius: 25px;
	    /*背景色*/
	    background-color: blue;
	    /*设置block才能显示出来*/
	    display: inline-block;
	}
	.blue {
	    background-color: blue;
	}
	.red {
	    background-color: red;
	}
</style>
<body>
    <span class="circle blue"></span>
    <span class="circle red"></span>
</body>

结果

前端需求设置头像

<span style="height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 25px; background: skyblue; color: white; display: inline-block;">yu</span>