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!