CSS经常遇到的问题

怪叫兔

已于 2022-11-14 20:21:12 修改

阅读量263

点赞数

分类专栏： css 文章标签： css3 css html5 html

于 2022-11-14 10:56:54 首次发布

本文链接：https://blog.csdn.net/qq_44330459/article/details/127843183

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了CSS中的模糊阴影和背景透明效果的实现方式，包括box-shadow和backdrop-filter属性的使用。同时，讲解了如何在Vue.js中创建带有选中状态的侧边导航栏，利用`var`和`let`的区别来管理状态，并展示了动态更换组件的示例。此外，还提到了如何通过npm引入和使用Font Awesome图标库。

摘要由CSDN通过智能技术生成

CSS笔记

模糊

  /* 使背景模糊化 */
            backdrop-filter: blur(10px);
            box-shadow: 0 0 20px #a29bfe;
            border-radius: 15px;

阴影

box-shadow: 阴影类型 X轴位移 Y轴位移阴影大小阴影扩展阴影颜色

   box-shadow: inset 0 0 20px #fff,
        inset 10px 0 46px #eaf5fc,
        inset 80px 0 60px #efcde6,
        inset -20px -60px 100px #f9f6de,
        inset 0 50px 140px #f9f6de,
        0 0 90px #fff;

背景透明

background-color: transparent;
rgba(255,255,255,0)

侧边导航栏

ul li div {
}

引入fontAwesome

npm i -S font-awesome
import ‘font-awesome/css/font-awesome.css’
标签中 i class=“fa fa-th-large” 等等

参考样式：Font Awesome 官网
参考链接：Vue中引入FontAwesome

var和let区别

“var是函数作用域，而let是块作用域。在函数内声明了var，整个函数内都是有效的，在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，而let由于是块作用域，所以如果在块作用域内（for循环内）定义的变量，在其外面是不可被访问的。”

选中（菜单栏、按钮等等）

 <ul>
                <li>
                    <div class="tab-item" :class="{ 'tab-item-selected': curtab == 1 }" @click="changeTab(1)">管理员认证
                    </div>
                </li>
                <li>
                    <div class="tab-item" :class="{ 'tab-item-selected': curtab == 2 }" @click="changeTab(2)">用户认证</div>
                </li>
                <li>
                    <div class="tab-item" :class="{ 'tab-item-selected': curtab == 3 }" @click="changeTab(3)">用户注册</div>
                </li>
                <li>
                    <div class="tab-item" :class="{ 'tab-item-selected': curtab == 4 }" @click="changeTab(4)">口令更新</div>
                </li>

            </ul>

 .tab-item-selected{
    background: linear-gradient(rgba(66, 157, 237, 0.6),rgba(114, 230, 197, 0.6));
    color: rgba(3, 3, 3,1)
}

更换组件


import { ref } from 'vue';
import AdminLogin from './components/AdminLogin.vue'
import UpdatePassword from './components/UpdatePassword.vue';
import UserLogin from './components/UserLogin.vue'
import UserRegister from './components/UserRegister.vue'

const curtab = ref(0);//子组件0
//curtab是页面ref后面对应的名字
const changeTab = (tabindex) => {
    curtab.value = tabindex//子组件tabindex
}

 <div class="login-inner">
                <div class="tab-content">
                    <AdminLogin v-if="curtab == 1"></AdminLogin>
                    <UserLogin v-if="curtab == 2"></UserLogin>
                    <UserRegister v-if="curtab == 3"></UserRegister>
                    <UpdatePassword v-if="curtab == 4"></UpdatePassword>
                </div>
            </div>