"; 2. Set the css attribute to ".status-point {display : inline-block;width: 6px;height: 6px;border-radius: 50%;}" to achieve the dot effect."/> "; 2. Set the css attribute to ".status-point {display : inline-block;width: 6px;height: 6px;border-radius: 50%;}" to achieve the dot effect.">
Home >Web Front-end >Front-end Q&A >How to implement dots in css3
How to implement dots in css3: 1. Create a div as "
"; 2. By setting css attributes Set ".status-point {display: inline-block;width: 6px;height: 6px;border-radius: 50%;}" to achieve the dot effect.
The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer
How to implement dots in css3?
css to realize small dots
Required effect:
<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>
If you think of it later, you can also use the i tag.
Recommended study: "css3 video tutorial"
The above is the detailed content of How to implement dots in css3. For more information, please follow other related articles on the PHP Chinese website!