2022web前端全栈完整整理——（二）csscss3篇

1. css基础：https://alex-ss.blog.csdn.net/article/details/83053901

2. css3新增属性值initial：可直接取消某个元素指定的样式值使其变为默认值，如color:initial。

3. vue3中的.vue文件的style里的css可以使用js/ts中的声明变量，且支持双向响应：属性：v-bind(js/ts变量)。

<template>
    <div class='ace_class'>文本颜色</div>
    <button @click='btnClick'>点击修改文本颜色</button>
</template>
<script setup lang='ts'>
import {ref} from 'vue';
const colorVal =ref('red');
const btnClick=e=>{
    colorVal.value='blue'
}
</script>

<style lang='scss' scoped>
.ace_class{
    color: v-bind(colorVal )
}
</style>

4. vue3中深度选择器:deep()的使用，在vue2中css使用>>>，以及预编译less/scss/sass中的/deep/，在vue3中都替换为:deep()：

.box{
    :deep(.ul){
        /*样式*/
    }
}

.box :deep(.ul){
        /*样式*/
}

5. 镜像界面，像沙特阿拉伯语：

.css{
    direction：rtl/ltr;
}

6. css磨砂效果：https://blog.csdn.net/qq_42231156/article/details/101203553