CSS 变量允许我们在样式表中定义一些值，然后在整个应用中轻松地重复使用和修改这些值。本文通过样例演示在 Vue 中，如何使用绑定机制来动态地改变 CSS 变量值从而实现动态地改变样式的目的。

1，运行效果

2，样例代码

<template>
  <div class="block">
    <el-slider v-model="value1" :min="0" :max="90" style="width: 300px"></el-slider>
    <div class="message-container" :style="{ '--arrowTopValue' : value1 + 7 + 'px' }">
        欢迎访问hangge.com<br>
        欢迎访问hangge.com<br>
        欢迎访问hangge.com<br>
        欢迎访问hangge.com<br>
        欢迎访问hangge.com
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      value1: 0
    }
  },
  methods: {
  }
}
</script>

<style scoped>
  /* 消息框样式 */
  .message-container {
    width: 260px;
    margin: 20px;
    padding: 10px;
    border-style: solid;
    border-width: 1px;
    border-radius: 0.125rem;
    border-color: rgb(154, 223, 223);
    background-color: white;
    filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 1px 2px)
      drop-shadow(rgba(0, 0, 0, 0.06) 0px 1px 1px)
  }

  /* 通过消息框伪元素 ::before 和 ::after 实现三角样式定义 */
  .message-container::before, .message-container::after {
      content: "";
      position: absolute;
      top: var(--arrowTopValue, 20px); /** 设置三角箭头在垂直方向上的位置 */
      border-width: 7px;
      border-style: solid;
      transform: translateY(-50%);
  }

  /* 消息框伪元素 ::before 设置底部三角颜色为绿色 */
  .message-container::before {
      left: -14px;
      border-color: transparent #9ADFDF transparent transparent;
  }

  /* 消息框伪元素 ::after 设置上层三角颜色为白色 */
  .message-container::after {
      left: -13px; /* 与上面的left值相差1px，实现绿色边框效果 */
      border-color: transparent white transparent transparent;
  }
</style>