使用边框颜色与边框阴影实现高亮效果

实现效果：

核心样式

.good {
    background: rgba(0, 180, 255, 0.5);
    border: 1px solid #00b4ff;
    box-shadow: 0px 0px 10px 1px #00b4ff inset; /* 内阴影，模拟边框高亮效果 */  
}

所有的Html结构和样式

<template>
  <div class="baseData-container">
    <div class="bc-line">
      <div class="bci-item">
        <img
          :src="require('@/assets/img/useData/' + parseImg(90))"
          class="tag_img"
          style=""
          alt=""
        />
        <div class="bci-item-content" :class="parseClass(90)">
          <div class="bci-ic-tag">班级数</div>
          <div class="bci-ic-value">22</div>
        </div>
      </div>
      <div class="bci-spacer"></div>
      <div class="bci-item">
        <img
          :src="require('@/assets/img/useData/' + parseImg(60))"
          class="tag_img"
          style=""
          alt=""
        />
        <div class="bci-item-content" :class="parseClass(60)">
          <div class="bci-ic-tag">课程数</div>
          <div class="bci-ic-value">35</div>
        </div>
      </div>
    </div>
    <div class="bc-line">
      <div class="bci-item">
        <img
          :src="require('@/assets/img/useData/' + parseImg(90))"
          class="tag_img"
          style=""
          alt=""
        />
        <div class="bci-item-content" :class="parseClass(90)">
          <div class="bci-ic-tag">学生数</div>
          <div class="bci-ic-value">22</div>
        </div>
      </div>
      <div class="bci-spacer"></div>
      <div class="bci-item">
        <img
         :src="require('@/assets/img/useData/' + parseImg(77))"
          class="tag_img"
          style=""
          alt=""
        />
        <div class="bci-item-content" :class="parseClass(77)">
          <div class="bci-ic-tag">微课数</div>
          <div class="bci-ic-value">35</div>
        </div>
      </div>
    </div>
    <div class="bc-line">
      <div class="bci-item">
        <img
          :src="require('@/assets/img/useData/' + parseImg(80))"
          class="tag_img"
          style=""
          alt=""
        />
        <div class="bci-item-content" :class="parseClass(80)">
          <div class="bci-ic-tag">实验数</div>
          <div class="bci-ic-value">22</div>
        </div>
      </div>
      <div class="bci-spacer"></div>
      <div class="bci-item">
        <img
          :src="require('@/assets/img/useData/' + parseImg(60))"
          class="tag_img"
          style=""
          alt=""
        />
        <div class="bci-item-content" :class="parseClass(60)">
          <div class="bci-ic-tag">项目数</div>
          <div class="bci-ic-value">35</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  // 组件名字
  name: "baseData",
  // 组件参数
  props: {
    percentage: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      courseID: "",
      labId: "",
      chapter: {},
    };
  },
  mounted() {
    this.initPic();
  },
  // 组件方法
  methods: {
    initPic() {},
    parseImg(_pr) {
      if (_pr >= 90) {
        return "excellent.png";
      } 
      else if (_pr >= 80) {
        return "good.png";
      } 
      else if (_pr >= 70) {
        return "average.png";
      } 
      else {
        return "poor.png";
      }
    },
    parseClass(_pr) {
      if (_pr >= 90) {
        return "excellent";
      } 
      else if (_pr >= 80) {
        return "good";
      } 
      else if (_pr >= 70) {
        return "average";
      } 
      else {
        return "poor";
      }
    },
  },
};
</script>
<style scoped="scoped" lang="scss">
.baseData-container {
  .bc-line {
    display: flex;
    height: 43px;
    justify-content: space-between;
    margin-bottom: 15px;
    .bci-spacer {
      width: 10px;
    }
    .bci-item {
      display: flex;
      flex: 1;
      .tag_img {
        width: 41px;
        height: 100%;
        margin-right: 4px;
      }
      .bci-item-content {
        display: flex;
        flex: 1;
        background: rgba(255, 48, 38, 0.5);
        border: 1px solid #ff625a;
        align-items: center;
        justify-content: space-between;
        padding-left: 10px;
        padding-right: 10px;
      }
      // 优
      .excellent {
        background: rgba(58, 154, 13, 0.5);
        border: 1px solid #69c23f;
        box-shadow: 0px 0px 10px 1px #69c23f inset; /* 内阴影，模拟边框高亮效果 */  
      }
      // 良
      .good {
        background: rgba(0, 180, 255, 0.5);
        border: 1px solid #00b4ff;
        box-shadow: 0px 0px 10px 1px #00b4ff inset; /* 内阴影，模拟边框高亮效果 */  
      }
      // 中
      .average {
        background: rgba(253, 141, 34, 0.5);
        border: 1px solid #fd9837;
        box-shadow: 0px 0px 10px 1px #fd9837 inset; /* 内阴影，模拟边框高亮效果 */  
      }
      // 差
      .poor{
        background: rgba(255, 48, 38, 0.5);
        border: 1px solid #ff625a;
        box-shadow: 0px 0px 10px 1px #ff625a inset; /* 内阴影，模拟边框高亮效果 */  
      }
    }
  }
}
</style>