概念
v-bind in CSS和v-bind是两个不同的概念不要弄混淆了，点击链接可以看官网详细的解释
v-bind:是用在template模板中，用来动态绑定参数的内置指令，一般我们用的是:简写。
v-bind in CSS：是用在style标签中，来获取在script中定义css属性值的变量，即我们能够在style标签中引入动态的css变量了。
注意，v-bind in css 是vue3新提出的属性，vue2并没有
使用
以组合式的写法为例，在script标签中定义变量，在style标签中通过**v-bind(变量名)**，就可将css属性值动态设置了
<script setup>
const color = 'red'
</script>
<template>
<div>
<p>hello</p>
</div>
</template>
<style scoped>
p {
color: v-bind(color);
}
</style>
原理
在使用v-bind in css后，vue3自动在组件根标签生成了自定义属性，值为我red，然后在p标签上通过**var()**函数传入自定义属性获取到我们定义的变量。
在vue3中我们不用手动定义自定义属性到根标签，且不用**var()** 函数。这些都是vue3内部做的，在使用**v-bind()** 后，vue3内部将定义的变量名x生成 --hash值-x 自定义属性，设置到根标签style中，然后在v-bind的部分实际上是使用**var()** 传入生成的 --hash值-x 自定义属性。可以说**v-bind()**是vue3出的语法糖。