CSS圆形序号简单案例

一、圆形序号

1.实现效果：

2.使用方法

我使用的是<div>标签加圆角边框的办法，圆角边框的值： border-radius: 50%;

详细代码:

<style lang="scss" scoped>
.title1 {
	height: 22px; //高
	width: 22px; //宽
	background-color: #1074BD; //背景颜色
	display: inline-block; //显示方式：行内块标签
	border-radius: 50%; //圆角边框的弧度
	line-height: 22px; //数字的行高
	text-align: center; //调整位置，使数字居中
	margin-right: 15px; //调整外边距，使位置更美观
}
</style>

二、应用案例

1.案例效果展示

2.案例代码

代码如下（示例）：

<template>
<vue3ScrollSeamless class="scroll-wrap  wrapSpec" :classOptions="classOptions" :dataList="state.yhzlListData">
	<ul class="ui-wrap">
		<li style="height: 72px;width: 100%;color: white;" v-for="(item, i) of state.yhzlListData" :key="i" :title="item.dangerDesc">
			<div style=" width: 100%;display: flex;">
				<div class="title1">{{ i+1 }}</div>
				<div class="title2">{{ item.startTime}}</div>
			</div>
			<div style="margin-left:30px">小区租客通过电话向网格员反映楼层噪音问题，表示近一个月来有人一直半夜弹钢琴，产生的噪音...</div>
		</li>
	</ul>
</vue3ScrollSeamless>
</template>

<style lang="scss" scoped>
.title1 {
	height: 22px; //高
	width: 22px; //宽
	background-color: #1074BD; //背景颜色
	display: inline-block; //显示方式：行内块标签
	border-radius: 50%; //圆角边框的弧度
	line-height: 22px; //数字的行高
	text-align: center; //调整位置，使数字居中
	margin-right: 15px; //调整外边距，使位置更美观

}

</style>