css3如何成功实现圆点

发布时间：2023-07-21 15:00:07 所属栏目：教程来源：转载

导读： 　　为大家详细介绍“css3如何实现圆点”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3如何实现圆点”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一

　　为大家详细介绍“css3如何实现圆点”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3如何实现圆点”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

　　css3实现圆点的方法：1、创建div为“<div class="status-point" style=" background-color:#67C23A" />”；2、通过设置css属性为“.status-point {display: inline-block;width: 6px;height: 6px;border-radius: 50%;}”即可实现圆点效果。

　　   <div v-if="scope.data.row.status === 1">

　　        <div class="status-point" style=" background-color:#67C23A" />

　　        已通过

　　      </div>

　　      <div v-else-if="scope.data.row.status === 0">

　　        <div class="status-point" style=" background-color:#E6A23C" />

　　        未被审批</div>

　　      <div v-else-if="scope.data.row.status === 2">

　　        <div class="status-point" style=" background-color:#00000040" />

　　        未通过</div>

　　<style scoped>

　　.status-point {

　　 display: inline-block;

　　 width: 6px;

　　 height: 6px;

　　 border-radius: 50%;

　　}

　　</style>

　　后面想到用，也可以用i标签。

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!