css常用的

1.  盒子阴影：box-shadow: 10px 10px 10px #0a0a0a;

2.线性渐变：background: linear-gradient(to right,#59A330,#59A330, #109337,#59A330);

3.

font-family: '微软雅黑';
font-family: 'Microsoft YaHei';

    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
 

 块元素隐藏占位visibility:hidden; ==》visibility:visible;

 块元素隐藏不占位display:none; ==》display:block;

4.单行文本溢出

p {
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

多行文本溢出

WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。（webkit是私有属性）

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;   /* 设置省略号在容器第四行文本后 */
-webkit-box-orient: vertical;

5. 复选框与文字对齐

---

<label>
    <input type="checkbox">
    Checkbox Label
</label>

label {
    display: inline-flex; /* 将 label 元素设为内联弹性容器 */
    align-items: center; /* 垂直居中对齐 */
}
/* 以下样式用于增加间距，可根据需要调整 */
label input {
    margin-right: 5px; /* 在复选框右侧增加间距 */
}

 使用 Flexbox 布局：

<div class="checkbox-container">
    <input type="checkbox">
    <span>Checkbox Label</span>
</div>

.checkbox-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

 使用表格布局：

<table>
    <tr>
        <td><input type="checkbox"></td>
        <td>Checkbox Label</td>
    </tr>
</table>

table {
    border-collapse: collapse; /* 合并单元格边框 */
}

td {
    vertical-align: middle; /* 垂直居中对齐 */
}

自定义复选框颜色宽高：

<label class="checkbox-label">
    <input type="checkbox" class="custom-checkbox">
    Checkbox Label
</label>

/* 自定义复选框样式 */
.custom-checkbox {
    width: 20px; /* 修改复选框的宽度 */
    height: 20px; /* 修改复选框的高度 */
}

/* 自定义复选框选中状态的样式 */
.custom-checkbox:checked {
    background-color: #1abc9c; /* 修改选中状态的背景颜色 */
    border-color: #1abc9c; /* 修改选中状态的边框颜色 */
}

/* 自定义复选框的边框样式 */
.custom-checkbox {
    border: 2px solid #ccc; /* 设置复选框的边框 */
    border-radius: 4px; /* 添加圆角效果 */
}

/* 鼠标悬停时的样式 */
.custom-checkbox:hover {
    background-color: #f2f2f2; /* 设置悬停时的背景颜色 */
}

使用css自定义复选框：

<label class="custom-checkbox">
    <input type="checkbox">
    <span class="checkmark"></span>
    Checkbox Label
</label>

/* 复选框容器 */
.custom-checkbox {
    display: inline-block;
    position: relative;
    padding-left: 30px; /* 为了留出空间放置自定义的选择框 */
    margin-bottom: 10px; /* 可以根据需要调整垂直间距 */
    cursor: pointer;
    font-size: 16px; /* 可根据需要调整字体大小 */
}

/* 自定义的选择框 */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px; /* 自定义选择框的高度 */
    width: 20px; /* 自定义选择框的宽度 */
    background-color: #eee; /* 未选中状态的背景颜色 */
    border-radius: 4px; /* 添加圆角效果 */
}

/* 选中状态下的选择框 */
.custom-checkbox input:checked ~ .checkmark {
    background-color: #1abc9c; /* 选中状态的背景颜色 */
}

/* 自定义的勾号 */
.checkmark:after {
    content: '\2713'; /* Unicode 编码，表示勾号 */
    color: white; /* 勾号的颜色 */
    position: absolute;
    display: none;
    text-align: center;
    line-height: 20px; /* 勾号的垂直居中 */
    font-size: 14px; /* 勾号的大小 */
}

/* 选中状态下显示勾号 */
.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

---

---

5. 水平垂直居中 

F1、父：{display:flex;};  子：{margin:auto;};

F2、（已知子元素宽高）margin：auto + 绝对定位

父：{ position:relative;}  子：{ position:absolute;top:0;left:0; 宽：XXpx；高：               XXpx;margin:auto;}

F3、已知子元素宽高

      父：{ 宽：XXpx; 高：XXpx; position:relative;}  

      子：{ 宽：XXpx; 高：XXpx;

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -(宽/2)px;

            margin-left: -(高/2)px;

         }

F4、用transform

       父：{ position: relative; }

       子：{ position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%); }

F5、用display

        父：{ display: flex;  justify-content: center;  align-items: center; }

F6、知道父元素宽高

        父：{ height: XXpx; width: XXpx; color: white; text-align: center; display: table-cell; vertical-align: middle;  }

       子：{ display: inline-block; width: XXpx; background: #4bad91; }

---

---

6、css绘制三角

<无边框>

div { width:0; height:0; border-width: 0 40px 40px; border-style: solid; border-color: transparent transparent rgba(0,0,0,0.3); }

<带边框>

div { position: relative; width:0; height:0; border-width: 40px 0 40px 40px ; border-style: solid; border-color: transparent black ; } div::after { content: ""; position: absolute; top:-36px; left:-38px; border-width: 36px 0 36px 36px ; border-style: solid; border-color: transparent red ; }

7、解决不同浏览器所显示出来的字体不同

   eg1:获取字体文件 （通常是.woff 或者.woff2格式的文件）

    eg2、将字体文件上传到服务器上的适当目录

    eg3、在css中定义@font-face规则

  @font-face { font-family: "CustomFont"; src: url("path/to/font-file.woff2")   format("woff2"), url("path/to/font-file.woff") format("woff"); /* 可选：定义字体的   其他属性，如 font-weight 和 font-style */ }

     eg4、应用自定义字体

     body { font-family: "CustomFont", Arial, sans-serif; }

 

 在这个示例中，"CustomFont" 是您定义的字体名称。如果浏览器支持自定义字体，它将使用该字体，否则将回退到 Arial 和 sans-serif 字体族。请注意，使用 @font-face 规则时，要确保您拥有合法的字体许可，以遵守版权和授权规定。

8、icon图标的使用

加入购物车   ===》  添加至项目  ===》 下载项目中图标至本地，解压，放入到static文件夹中（带demo字样的是详细配置说明文件，不用引入）

===》 <style> 里引入下载好的样式    ===》   eg: <i class="iconfont"></i>

 

9. vue项目搭建 /  quasar 1.0  => node.js>=10，npm>=5是必须的

    node -v  npm -v 

    npm install vue-cli -g （vue-lcli2)
    npm install -g @vue/cli (vue-cli3)

   yarn global add @quasar/cli # 或者 $ npm install -g @quasar/cli

    yarn create quasar  或 npm init quasar

   

好看的外阴影 （右边框和下边框）

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); 

登录按钮动画效果

<button class="Log_BTN" id="login-button">登录</button>

.Log_BTN{
    width: 265px;
    height: 50px;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 20px;
    margin: 40px auto;
    display: flex;
    justify-content: center; /* 水平居中 */
    border: 0;
    border-radius: 60px;
    background-color: #3482ff;
    cursor: pointer;
    transition: transform 0.2s ease; /* 添加这行以设置动画效果 */
}
.Log_BTN:hover{
    background-color: #F89E52;
}
.Log_BTN.shrink {
    transform: scale(0.95); /* 缩小到原尺寸的0.95倍 */
 }

<script>
        const loginButton = document.getElementById("login-button");

        loginButton.addEventListener("click", () => {
            loginButton.classList.add("shrink"); // 添加缩小样式
            setTimeout(() => {
                loginButton.classList.remove("shrink"); // 移除缩小样式，还原按钮
            }, 200); // 200毫秒后移除样式，可根据需要调整时间
        });
        loginButton.addEventListener("mousedown", () => {
            isMouseDown = true;
            loginButton.classList.add("shrink"); // 添加缩小样式
        });

        loginButton.addEventListener("mouseup", () => {
            isMouseDown = false;
            loginButton.classList.remove("shrink"); // 移除缩小样式，还原按钮
        });

        loginButton.addEventListener("mouseleave", () => {
            if (isMouseDown) {
                isMouseDown = false;
                loginButton.classList.remove("shrink"); // 移除缩小样式，还原按钮
            }
        });
    </script>