外阴影和内阴影介绍
在前端页面设计中，阴影是非常常见的视觉效果。它可以让元素看起来更有层次感，也可以用来表达悬浮、按压、凹陷、卡片、按钮等状态。 CSS 中最常用的阴影属性是 。它既可以实现外阴影，也可以实现内阴影。 一、什么是外阴影 外阴影指的是元素外部的阴影效果。 它会出现在元素边框之外，让元素看起来像是从页面中“浮起来”了一样。常见的卡片、弹窗、按钮悬浮效果，基本都会用到外阴影。 例如： 这个阴影表示：元素下方有一层柔和的黑色阴影，让卡片看起来更有立...
border-image-slice详细介绍
是 CSS 系列属性里最关键、也最容易让人懵的一个属性。 它的作用可以简单理解为： 把一张图片切成九宫格，然后决定哪几块用来绘制元素的边框。 它通常和这些属性一起使用： 或者简写成： 其中 决定“怎么切图”。 一、 是什么？ 普通的 只能画纯色边框： 但有时候我们想用图片作为边框，比如： 游戏按钮边框 像素风 UI 复古窗口 聊天气泡 卡牌边框 花纹装饰框 九宫格按钮背景 这时候就可以用 。 例如一张按钮图片长这样： 我们希望按钮变宽时...
如何在最小副作用下创建 BFC
在 CSS 布局的江湖中， BFC (Block Formatting Context，块级格式化上下文) 是一个老生常谈却又至关重要的概念。无论是解决 高度塌陷 、 清除浮动 ，还是防止 垂直外边距重叠 ，BFC 都是我们的得力助手。 但是，创建 BFC 的方法有很多： 、 、 、 …… 哪种方法对现有布局的“破坏”最小？ ❌ 过去的老方法 在过去，为了触发 BFC，我们不得不使用一些带有副作用的“黑客”技巧： : 元素会脱离文档流，...
CSS过渡性能解析：transition: all
CSS过渡性能深度解析：为什么 可能是你页面的隐形杀手 一、引言：一个被忽视的性能陷阱 你是否曾在项目中这样写： 看似简洁优雅，却可能在低端设备上引发卡顿、掉帧。 真相 ： 是前端性能优化中高频出现的“隐形陷阱”。本文将彻底揭开它的面纱。 二、核心概念： 到底在控制什么？ 指定 哪些CSS属性变化时触发动画过渡 。它是过渡效果的“守门员”： | 值 | 含义 | 生成的CSS | | | | | | | 所有 可过渡属性变化时均触发动画...
在CSS中，四种高度视口单位的区别
在CSS中，视口单位是构建响应式网页设计的重要工具，特别是针对移动端开发。除了传统的 ，CSS新引入了 、 和 等更精确的单位，解决传统单位在移动端的局限性。 四种高度视口单位的区别 | 单位 | 全称 | 含义 | 特点 | | | | | | | vh | Viewport Height | 传统视口高度单位，1vh = 视口高度的1% | 在移动端有问题：不考虑浏览器UI变化，经常导致内容被遮挡或出现意外滚动 | | svh |...
keyframes 关键帧机制
一、什么是 @keyframes？ 用于定义动画在不同时间点（关键帧）的样式变化；配合 属性应用到元素上。 定义动画 ：使用 声明关键帧序列； 应用动画 ：在选择器中通过 / 相关长属性控制表现。 二、基本语法 等价写法（ / ）： 三、与 属性配合使用 /相关长属性 | 属性名 | 含义 | 示例值 | | : | : | : | | | 动画名称 | | | | 持续时长 | 、 | | | 速度曲线 | / / / | | | 延...
backdrop-filter属性介绍
CSS 属性详解： 一、什么是 是 CSS 中的一种滤镜属性，用于对 元素背后的区域 应用图形效果（如模糊、亮度调整、对比度等）。 与 的区别： ：作用于元素自身内容。 ：作用于元素的背景（背后内容），通常需要元素本身带有透明度才能看到效果。 例如： 二、基本语法 常见的 ： ：模糊效果 ：亮度调整 ：对比度调整 ：灰度 ：色相旋转 ：反色 ：透明度 ：饱和度 ：怀旧效果 可同时使用多个： 三、使用示例 1. 毛玻璃效果（Glassmo...
边框的多种实现
在 CSS 世界里，边框不只是 一条路。你可能一直用 写边框，hover 时元素宽度变化、渐变边框做不出来……其实，现在有更酷、更灵活的方式来实现边框效果。今天我们就来盘一盘——都有哪些边框“新玩法”，以及什么时候用它们最合适。 1️⃣ 传统 border 优点： 简单直接，兼容性最好 可控边宽、样式、颜色 缺点： 不支持渐变、阴影等复杂效果 hover 动态变化会影响元素大小（因为 border 会占空间） ✅ 适用场景： 简单实用，...
横向滚动讲解
横向滚动在移动端与桌面端的差异与解决方案 1\. 问题背景 在 Vue/React 等前端项目里，我们常常会实现一个横向滚动的列表，例如： 并配合 布局与固定宽度的子项，让子项在横向排列后出现滚动条。 在移动端（触屏设备），手指左右滑动时，容器能够自然横向滚动。 但在桌面端（PC 浏览器），很多时候看起来「不能滚动」。 2\. 移动端为什么能滚？ 触摸事件 ：手指横向拖动会触发浏览器的横向滚动逻辑。 惯性滚动支持 ：加上 可以让 iOS...