Notes

主题

CSS通用样式 ​

第三方字体图标优化方案 ​

css
/* Chrome 检测到字体加载过慢，为避免文字长时间不显示，使用了备用字体 */
/* 使用 font-display: swap; 表示：先使用备用字体渲染，等自定义字体加载好了再替换。这样可以避免文字长时间不显示*/

/* 例如： */
@font-face {
  font-family: 'IconFont';
  src: url('http://192.168.31.254:9999/src/fonts/iconfont.woff2?t=1764658108988') format('woff2');
   ......
  font-display: swap; /* 推荐 */
}

文字操作系列 ​

文字换行 ​

scss
{
    // 文职换行,中英文通用.
    white-space: normal;	// 文字能自动换行
    word-break: break-all;	// 防止文字被挤压
    overflow-wrap: break-word; /* 现代标准 */
    word-wrap: break-word;	// 允许英文单词内换行（区别于 break-all）：优先在单词间隙换行，仅单词超长时才在词内换行，兼顾中英文排版

    // pre标签可能有点用
    white-space: pre-wrap;       /* 保留空格和换行，同时允许自动换行 */
}

文字不允许换行/超出'...'代替 ​

scss
{
    overflow: hidden;
    text-overflow: ellipsis; // 溢出部分显示省略号（仅在 -webkit-line-clamp 生效时显示）
    -webkit-line-clamp: 2;  // 文字超出两行...
    line-clamp: 2;
    display: -webkit-box;	// 将元素转为弹性盒模型，配合 -webkit-line-clamp 生效
    -webkit-box-orient: vertical;	// 设置弹性盒的排列方向为垂直，让文字按行排布
    word-break: break-word;  // 兼容英文长词
    overflow-wrap: break-word; // 标准语法
}

背景 ​

玻璃效果 ​

scss
{
    /** 对元素背后的背景区域进行模糊处理，并将背景颜色的饱和度提升到 200% **/
    // saturate() 滤镜函数，用来调整颜色的饱和度（鲜艳程度）;blur值越大背景越模糊
    backdrop-filter: saturate(200%) blur(10px);
    -webkit-backdrop-filter: saturate(200%) blur(10px); // 兼容webkit内核【ios】

    // 模糊元素自身（比如把一张图片变模糊）
    filter: blur(10px);
    // 模糊元素背后的背景区域（毛玻璃效果的核心
    backdrop-filter: blur(10px);
}

过度效果 ​

transition ​

scss
{
    /* ========== 过渡属性：指定哪些属性参与过渡 ========== */
    transition-property: all;                    /* 所有属性都参与过渡 */
    transition-property: background-color;       /* 只有背景色参与过渡 */
    transition-property: width, height, opacity; /* 多个属性，逗号分隔 */
    transition-property: none;                   /* 没有任何属性参与过渡 */


    /* ========== 过渡时长：动画持续多久（必填项） ========== */
    transition-duration: 0.2s;    /* 0.2 秒 */
    transition-duration: 300ms;   /* 300 毫秒，和 0.3s 一样 */
    transition-duration: 1s;      /* 1 秒，比较慢的过渡 */


    /* ========== 动画方式（缓动函数）：控制速度变化曲线 ========== */
    transition-timing-function: ease;              /* 默认值，先慢→快→慢，最自然 */
    transition-timing-function: linear;            /* 匀速，从头到尾速度不变 */
    transition-timing-function: ease-in;           /* 慢进快出，适合元素"消失" */
    transition-timing-function: ease-out;          /* 快进慢出，适合元素"出现" */
    transition-timing-function: ease-in-out;       /* 慢进慢出，适合来回切换 */
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 自定义曲线，带回弹效果 */
    transition-timing-function: steps(4, end);     /* 阶梯式，分 4 步跳变，像逐帧动画 */


    /* ========== 延迟时间：动画开始前等多久 ========== */
    transition-delay: 0s;     /* 不延迟，立即开始（默认值） */
    transition-delay: 0.1s;   /* 延迟 0.1 秒再开始 */
    transition-delay: 0.5s;   /* 延迟半秒再开始 */


    /* ========== 简写形式：属性 时长 动画方式 延迟 ========== */
    transition: all 0.2s ease;                              /* 最常用，所有属性 0.2s 自然过渡 */
    transition: background-color 0.3s ease-out;             /* 背景色 0.3s 快进慢出 */
    transition: transform 0.4s ease-in-out;                 /* 变换 0.4s 慢进慢出 */
    transition: opacity 0.3s linear 0.1s;                   /* 透明度 0.3s 匀速，延迟 0.1s */
    transition: width 0.3s ease, opacity 0.5s linear 0.1s;  /* 多个属性各自配置，逗号分隔 */

    /* 多个属性各自独立设置（逗号分隔） */
    transition: 
        background-color 0.2s ease,            /* 背景色 0.2秒 平滑过渡 */
        box-shadow 0.3s ease-out,              /* 阴影 0.3秒 快进慢出 */
        transform 0.4s ease-in-out 0.1s;       /* 变换 0.4秒 慢进慢出 延迟0.1秒 */
}

滚动条 ​

全局自定义滚动条样式 ​

scss
:root{
    --lukes-scrollbar-width: 8px;
}
/* 1. WebKit 浏览器（Chrome/Edge/Safari） */
/* 1. 滚动条整体样式（宽/高） */

::-webkit-scrollbar {
    width: var(--lukes-scrollbar-width);    /* 垂直滚动条宽度 */
    height: var(--lukes-scrollbar-width);   /* 水平滚动条高度 */
}

/* 2. 滚动条轨道（背景、圆角） */
::-webkit-scrollbar-track {
    /* 轨道背景色 */
    background: rgba(0,0,0,0);  
}

/* 3. 滚动条滑块（核心样式） */
::-webkit-scrollbar-thumb {
    /* 滑块默认颜色 */
    background-color: rgba(144, 147, 153, 0.3);  
    cursor: pointer;
    /* 上下左边框保留，营造悬浮感 */
    border-right: 2px solid #1c0e36;
    /* 滑块圆角（避免尖锐） */
    border-radius: calc(var(--lukes-scrollbar-width) / 2);  
}

/* 4. 滑块 hover 状态 */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.5);  /* hover 时加深颜色 */
}

/* 5. 滑块激活（点击拖动）状态 */
::-webkit-scrollbar-thumb:active {
    /* background: #888;     激活时更深颜色 */
}

/* 可选：滚动条交汇处样式 */
::-webkit-scrollbar-corner {
    /* background: #f1f1f1;
    border-radius: 6px; */
}

/* 2. Firefox */
.container {
    /* scrollbar-width: 6px; */
    /* 滑块颜色 + 轨道颜色 */
    /* scrollbar-color: rgba(144, 147, 153, 0.3) rgba(0,0,0,0); */
}

局部容器自定义滚动条样式 ​

scss
/* 1. container-scroll为容器的类名 */
.container-scroll{
    /* 1. WebKit 浏览器（Chrome/Edge/Safari） */
    /* 1. 滚动条整体样式（宽/高） */

    --lukes-container-scroll-width: 6px;

    &::-webkit-scrollbar {
        width: var(--lukes-container-scroll-width);    /* 垂直滚动条宽度 */
        height: var(--lukes-container-scroll-width);   /* 水平滚动条高度 */
    }

    /* 2. 滚动条轨道（背景、圆角） */
    &::-webkit-scrollbar-track {
        /* 轨道背景色 */
        background: transparent;  
    }

    /* 3. 滚动条滑块（核心样式） */
    &::-webkit-scrollbar-thumb {
        /* 滑块默认颜色 */
        background-color: rgba(144, 147, 153, 0.3);  
        cursor: pointer;
        /* 上下左边框保留，营造悬浮感 */
        border-right: 2px solid transparent;
        /* 滑块圆角（避免尖锐） */
        border-radius: calc(var(--lukes-container-scroll-width) / 2);  
    }

    /* 4. 滑块 hover 状态 */
    &::-webkit-scrollbar-thumb:hover {
        background-color: rgba(144, 147, 153, 0.5);  /* hover 时加深颜色 */
    }

    /* 5. 滑块激活（点击拖动）状态 */
    &::-webkit-scrollbar-thumb:active {
        /* background: #888;     激活时更深颜色 */
    }

    /* 可选：滚动条交汇处样式 */
    &::-webkit-scrollbar-corner {
        /* background: #f1f1f1;
        border-radius: 6px; */
    }
}

/* 在屏幕宽度小于等于 768px 时应用的样式 */
@media screen and (max-width: 768px) {
    .container-scroll{
        --lukes-container-scroll-width: 3px;
    }
}

局部容器保存滚动功能隐藏滚动条 ​

scss
/** --------------------- 自定义容器隐藏滚动条 --------------------- **/
.container-scroll-none{
    // 只y轴滚动
    overflow-y: scroll;
    /* 容器级别的隐藏（兼容多浏览器） */
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */

    &::-webkit-scrollbar {
        display: none; /* Chrome/Edge/Safari 容器滚动条隐藏 */
    }
}

内部变化不影响外部 ​

scss
// 优化容器
.contain-container{
  // 性能优化：内部变化不影响外部 （主要处理【x轴滚】动条超出，顶部导航采用【粘性定位】不能使用【overflow-x: hidden】来隐藏x轴滚动条，所以用contain解决）
   /* 等同于告诉浏览器：
     1. 这个元素内部怎么布局都不会影响外面
     2. 这个元素只在自己的框里画东西，不会"污染"外部
  */
   //layout: 隔离元素的内部布局，使其与页面其余部分互不影响【使用 contain: layout 后，浏览器只需检查该元素内部。这意味着你可以放心地在这个元素内部增删节点或改变布局，而不会引发页面其他区域的重新计算。】
   //paint: 将元素的绘制严格限制在其边界内，防止内容溢出。【如果该元素位于屏幕可视区域之外，浏览器会直接跳过对其子元素的绘制，从而节省渲染资源，加快其他可见内容的渲染速度】
  contain: layout paint;
  min-height: 100vh;
}

/* dvh兼容则使用下面的样式 */
@supports (height: 100dvh) {
  // 优化容器
  .contain-container{
    min-height: 100dvh;
  }
}

解决ios点击【按钮、输入框...】高亮、抖动问题 ​

scss
{
    /** ============== 解决ios点击时，抖动问题 ================ */
    /* 允许浏览器优化触摸事件，避免滑动被阻塞 */
    touch-action: manipulation;
    /* 禁用 Safari 原生的触摸高亮 */
    -webkit-tap-highlight-color: transparent;
    /** ============== 解决ios点击时，抖动问题 ================ */
}

ios系列问题 ​

scss
{
    /* 禁止缩放/滚动，但部分场景下地址栏仍可被边缘手势触发
    * none: 禁止所有默认触摸行为，所有触摸事件交给 JS
    * pan-y: 允许垂直滚动
    * pan-x: 允许水平滚动
    */
    touch-action: none;


    /* 防止iOS “滚动链”穿透防止用户在弹窗、侧边栏或局部滚动区域内滚动到底部时，意外带动整个页面滚动；
    * contain：防止滚动穿透到body，但不禁止回弹效果。
    * none：完全禁止
    */
    overscroll-behavior: contain;

    /* 彻底禁用垂直方向的过滚动反馈和滚动链 */
    overscroll-behavior-y: none; 

    /* 启用 iOS 惯性滚动 */
    -webkit-overflow-scrolling: touch;
}

使用媒体查询@media ​

scss
/** ==============  基础用法  ================ */
/* 当屏幕宽度大于等于 768px 时生效（大屏设备） */
@media (min-width: 768px) {
  .container { display: flex; }
}

/* 当屏幕宽度小于等于 600px 时生效（小屏设备） */
@media (max-width: 600px) {
  body { background-color: lightblue; }
}


/** ==============  针对不同的媒体类型  ================ */
/* 专门针对打印机的样式 */
@media print {
  body { color: black; background: white; }
}

/* 专门针对屏幕阅读器的样式 */
@media speech {
  /* 语音朗读相关样式 */
}


/** ==============  组合多个条件（逻辑运算符） ================ */
/* 【and】屏幕宽度在 400px 到 700px 之间，且处于横屏状态 */
@media screen and (min-width: 400px) and (max-width: 700px) and (orientation: landscape) {
  .box { background-color: red; }
}

/* 【逗号 / or】屏幕处于竖屏，或者宽度小于 3rem */
@media (orientation: portrait), (max-width: 3rem) {
  .box { background-color: blue; }
}

/* 【not】取反：排除不支持悬停操作的设备（如触摸屏） */
@media not screen and (hover: hover) {
  /* 针对触摸设备的特殊样式 */
}


/** ==============  针对设备特定属性  ================ */
/* 针对视网膜（高分辨率）屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .icon { background-image: url('icon@2x.png'); }
}


/** ==============  进阶写法：Media Queries Level 4 新语法  ================ */
/* 传统写法 */
@media (min-width: 400px) and (max-width: 700px) { ... }

/* Level 4 更清晰的写法 */
@media (400px <= width <= 700px) { ... }

HTML 标签中直接使用

html
<!-- 只有当屏幕宽度大于 900px 时，才会应用这个外部样式表 -->
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">

移动/电脑端【是否支持触摸】元素样式兼容性处理 ​

TIP

@media (any-hover: hover) 这是一个媒体查询，用来检测设备是否支持原生的悬停能力（如桌面端的鼠标）。

any-hover: hover：表示设备有支持悬停的输入方式（如鼠标）。

any-hover: none：表示设备没有支持悬停的输入方式（如手机触摸屏）。

input:hover { cursor: pointer; }

只有在满足上面的媒体查询条件时，这段样式才会生效。

当鼠标悬停在 <input> 元素上时，鼠标指针会变成手型（pointer），提示用户这是一个可交互的元素。

***** 例如：*****

scss
// 备有支持悬停的输入方式（不是触摸屏）
@media (any-hover: hover) { }
// 设备不支持悬停的输入方式（是触摸屏）
@media (any-hover: none){ }

检测css属性是否支持【降级处理方案】 ​

scss
/** ============== 浏览器是否支持某个特定的 CSS 属性或属性值 ================ */

@supports (属性名: 属性值) {
  /* 只有当浏览器支持该属性值时，这里的 CSS 规则才会生效 */
}

/* 同时支持两个特性 【支持逻辑运算符（and / or / not）】*/
@supports (display: grid) and (gap: 10px) {
  /* 只有当浏览器支持该属性值时，这里的 CSS 规则才会生效 */
}

Copyright © 2026 Luke

Lukes Studio · All Rights Reserved